1

ヘッダー、コンテンツ コンテナー、およびフッターを含む非常に基本的なレイアウトを取得した場合。私がする必要があるのは、レイアウト全体が画面に収まるように、コンテンツ コンテナーのサイズを大きくすることです。(もちろん、コンテンツ コンテナ内のテキストがこれを拡張しない限り)。

体に高さ 100% の値を割り当て、そこからコンテンツ コンテナーの高さを 100% に割り当ててみましたが、その結果、コンテンツ コンテナーのサイズが全画面の高さになります。

その前に、コンテンツ コンテナの高さを auto に設定していました。もちろん、レイアウトよりも大きな画面サイズの訪問者がページを表示した場合、ページの長さが十分ではありませんでした。

ここに私のコードの一部があります:

HTML:

<body>
    <div class="background"></div>
        <div class="page">
            <div class="header">
            </div>

            <div class="content">
            </div>

            <div class="footer">
            </div>
        </div>
</body>

CSS:

html, body {
    height:100%; 
    margin:0; 
    padding:0;
}
.page {
    position:relative; 
    height:100%;
    z-index:1; 
}
.content {
    position:relative;
    width:850px;
    height: 100%;
    margin: 0 auto;
    background: url(images/content.png) 0 0 repeat-y;
}
4

2 に答える 2

3

これはあなたが必要としているものだと思います（フッターは常に下に貼り付けられます）

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
}
.page {
    min-height:100%;
    position:relative;
}
.header {
    background:#00ff0f;
    padding:30px;
}
.content{
    padding:10px;
    padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
    text-align:justify; 
 }
.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:15px;   /* Height of the footer */
    background:#00ff0f;
    padding:10px 0; /*paddingtop+bottom 20*/
}

.content {
    height:100%; // IE HACK
}

HTML

<div class="page">
    <div class="header">Header</div>
    <div class="content">
        Some Content Here...
    </div>
    <div class="footer">Footer</div>
</div>​

すべての主要なブラウザでテストされています。 デモ。

</ p>

于 2012-09-09T19:43:14.653 に答える
0

あなたが本当に欲しいのは粘着性のあるフッターですよね？他の要素のスタイルを設定して、＃content要素が実際よりも大きいように見せることができます。

http://ryanfait.com/sticky-footer/

于 2012-09-09T19:19:01.047 に答える