1

次のような HTML ページを想像してください。

<body>
    <div class="main">
        <div class="free">aaa</div>
    </div>
</body>

freediv は絶対位置にあり、その位置はブラウザーの表示領域の外にあります。そのため、オーバーフローが発生し、スクロールバーが表示されます。これで結構です。

代わりに、maindivはブラウザー内の全領域と同じ大きさにする必要があります。可視領域に限定されるべきではありません。

html, body {
    height: 100%
}
.main {
    background-color: gray;
    width: 100%;
    height: 100%;
}
.free {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 3000px;
    top: 3000px;
}

ここでわかるように、http://jsfiddle.net/y79NS/12/、灰色の div は「オーバーフロー ゾーン」に拡張されていません。html 要素と body 要素に静的な幅/高さを追加すると機能しますが、どれだけ大きくする必要があるかは事前にわかりません。

純粋な CSS ソリューションはありますか? そうでない場合、ユーザーがいつでもブラウザーのサイズを変更できることを念頭に置いて、Javascript でそれを行う最善の方法は何ですか?

4

1 に答える 1

0

CSS にセミコロンがありません。非表示にする場合は、負のマージンも使用してください.free。

html, body {
    height: 100%;
}
body {
 position: relative;
}
.main {
    background-color: gray;
    height: 100%;
    width: 100%;
}
.free {
    position: absolute;
    width: 100px;
    height: 100px;
    left: -3000px;
    top: -3000px;
}

http://jsfiddle.net/btipling/y79NS/17/

于 2013-09-16T19:59:38.020 に答える