1

私はこのページを見つけました：http： //www.maddim.com/demos/spark-wp/

固定ヘッダーとその下に、幅や高さを定義せずにビューポートまで伸びるdivがあります。y軸のコンテンツのオーバーフローを許可し、必要に応じてスクロールバー（ボックススクロール、ビューポートスクロールバーなし）を適用します。HTMLは非常に単純です。

<header> ... </header>
<div id="main" role="main"> ... </div>

CSS：

#main {
bottom: 0;
left: 0;
overflow-y: scroll;
position: absolute;
right: 0;
top: 89px;
}

すべてのJSを無効にし、firebugのページ要素の大部分を削除した後も、裸の#main要素は以前と同じように動作します。

ここではどのような手法が使用され、＃mainコンテナのそのような動作を作成するためにどこで定義されましたか？

4

1 に答える 1

3

ここにいくつかのCSSの基本があります。 bottom: 0;まさにそれを言います。ビューポートの下部から0ピクセルの要素の下部を貼り付けます。本質的に同じことleft: 0;をします。は、垂直方向にオーバーフローするコンテンツのスクロールを許可し、この要素をページフローから取り出して、1か所のページに添付することを示しています。ビューポートの上部から89ピクセルの位置にこの要素を配置することにより、ヘッダー用のスペースを確保します。right: 0;overflow-y: scroll;position: absolute;top: 89px;

于 2013-03-11T18:57:33.323 に答える