0

Web ページに次の 3 つの div があります。

#header { //top div
height: 60px;
min-width: 1024px;
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
display: block;
}

#content { //middle div
min-width: 1024px;
min-height: 585px;
}

#buttons { //bottom div
min-width: 1024px;
height: 120px;
max-height: 120px;
background-color: rgba(229, 229, 255, 0.76);
}

例の絵

画像のように、解像度が変わるとコンテンツのdivが伸びません！ページサイズに合わせてコンテンツ div を拡張するにはどうすればよいですか? 垂直スクローラーを取得せずに！

4

2 に答える 2

1

固定の高さのフッターとヘッダーがある場合、次の html と css で目的を達成できます。

HTML

<div id="wrapper">
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="buttons">
    </div>
</div>

CSS

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

#wrapper {padding:60px 0 120px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
#content {min-height:100%;}
#header {margin-top:-60px; height:60px;}
#buttons {margin-bottom:-120px; height:120px;}

例

于 2013-04-30T09:12:28.100 に答える
0

ヘッダーとボタンの幅を固定したい場合は、コンテンツでこれを行うことができます。

#header.row { height: 60px; top: 0; }
#content.row { top: 60px; bottom: 120px; border: 1px solid black;}
#buttons.row { height: 120px; bottom: 0; }

http://jsfiddle.net/5hx5v/

于 2013-04-30T08:34:59.343 に答える