1

私は2つのメインを持っていdivます。1 つは#headerメニュー用で、もう 1 つは#containerコンテンツ用です。#containerコンテンツで満たされているかどうかに関係なく、ページの下部に到達したい. 問題は、に追加height:100%;するとbody、追加の空白とスクロールバーが発生することです。これは、不要な場合は望ましくありません。html#container

HTML:

<div id='header'></div>
<div id='container'></div>

CSS:

body{

    margin:0;
}

body,html {height:100%;}

#header {

    height:70px;
    width:100%;
    background-color:red;
}

#container {

    width:600px;
    background-color:gray;
    height:100%;
    margin:0 auto;
}

JSFIDDLE: http://jsfiddle.net/ymBnw/

4

7 に答える 7

1

コンテナ div で position:absolute を実行できます。

コード：

#container {
    width:600px;
    background-color:gray;
    margin:auto;
    bottom:0;
    top:70px;
    position: absolute;
    left:50%;
    margin-left:-300px;
}

デモ

于 2013-08-09T12:33:21.277 に答える
1

の と を操作し、 を絶対に配置すると、paddingこれを実現できます。好きなように設定できる は考慮していません。margin#container#headerwidth

html, 
body {
    padding: 0;
    margin: 0;
    height: 100%;
}

#header {    
    position: absolute;
    top: 0;    
    width: 100%;
    height: 70px;
    background-color: red;
    z-index: 10;
}

#container {    
    width: 600px;
    height: 100%;
    background-color: gray;
    margin: -70px auto -70px auto;
    padding-top: 70px;
}

#content
{
    padding-top: 70px;
}

作業例: http://jsfiddle.net/ymBnw/15/

編集

の設定を間違えましたpadding。これは (明らかに) の 2 倍margin(70px ではなく 140px) である必要があります。コード修正。

編集2

再び幸せではありません。以前の編集により、スクロールバーが戻ってきました。提案された新しいソリューションは、div内に新しい を追加します#container。

于 2013-08-09T12:33:41.233 に答える
0

これを試して

#container {

width:100%;
background-color:gray;
height:100%;
margin:0 auto;
}



#header {
height:70px;
width:100%;
background-color:red;
position:absolute;
}

デモ

于 2013-08-09T12:27:13.600 に答える