TA貢獻(xiàn)1854條經(jīng)驗(yàn) 獲得超8個(gè)贊
我正在使用以下代碼：CSS布局-100％的高度
最小身高
此頁面的#container元素的最小高度為100％。這樣，如果內(nèi)容所需的高度大于視口提供的高度，則#content的高度也會(huì)強(qiáng)制#container變長(zhǎng)。然后，可以使用#container上的背景圖像將#content中的可能列可視化；div不是表單元格，并且您不需要（或不需要）物理元素來創(chuàng)建這種視覺效果。如果您尚未確信；認(rèn)為抖動(dòng)的線條和漸變，而不是直線和簡(jiǎn)單的配色方案。
相對(duì)定位
由于#container具有相對(duì)位置，因此#footer將始終保留在其底部；由于上述最小高度不會(huì)阻止#container縮放，即使#content強(qiáng)制#container變長(zhǎng)，這也將起作用。
底部填充
由于不再存在于常規(guī)流程中，因此#content的填充底部現(xiàn)在為絕對(duì)的#footer提供了空間。默認(rèn)情況下，此高度包含在滾動(dòng)高度中，因此頁腳永遠(yuǎn)不會(huì)與上述內(nèi)容重疊。
稍微調(diào)整文本大小或調(diào)整瀏覽器窗口大小以測(cè)試此布局。
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
}
對(duì)我來說很好。
TA貢獻(xiàn)1887條經(jīng)驗(yàn) 獲得超5個(gè)贊
要將自定義高度設(shè)置為鎖定在某處：
body, html {
height: 100%;
}
#outerbox {
width: 100%;
position: absolute; /* to place it somewhere on the screen */
top: 130px; /* free space at top */
bottom: 0; /* makes it lock to the bottom */
}
#innerbox {
width: 100%;
position: absolute;
min-height: 100% !important; /* browser fill */
height: auto; /*content fill */
}
<div id="outerbox">
<div id="innerbox"></div>
</div>
舉報(bào)