[英]CSS Layout Help - Stretch div to bottom of page
我正在嘗試創建一個帶有“標題”區域的布局,其中包含徽標和一些鏈接,然后是一個需要擴展到頁面底部的內容區域。 這是我陷入困境的地方。
我用一個高度為100%的容器div包圍了標題和內容,這很好用。 但我不能讓內容div延伸到容器div的底部,因為給它一個100%的最小高度似乎從頁面主體獲取高度,所以我最終得到一個滾動條由於空間由標題占據頁面頂部。
這是一個線框,希望能讓我想要的更清晰......
這是一個快速的CSS示例,這是有效的,除了總是有一個滾動條,其中看起來是標題區域的高度...
html, body {
height: 100%;
margin: 0;
padding: 0;
color: #fff;
}
body {
background-color: #000;
}
#container {
position: relative;
margin: 0 auto;
width: 1000px;
min-height: 100%;
}
#header {
padding-top: 26px;
}
#logo {
width: 194px;
height: 55px;
margin: 0 auto;
background-color: #fff;
}
#content {
margin-top: 10px;
position: absolute;
width: 1000px;
min-height: 100%;
background-color: #fff;
}
這可以通過將標題和正文包裝在div中以向下推動頁腳來實現
的index.html
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
style.css文件
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
background-color: green;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
height: 90%
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
background-color:blue;
}
使容器div位置:relative和content div position:absolute。 然后給出內容div top:<header height>和bottom:0
現在不能測試這個,但我認為這樣的事情應該有效。
限制:標題高度應為靜態,具有絕對高度。
內容高度是動態的。
CSS代碼:
* {
padding:0;
margin:0;
}
html, body {
height: 100%;
color: #fff;
}
#header {
background: red;
position: absolute;
z-index:20;
height: 7em;
overflow:hidden;
width:100%;
}
#content {
background: blue;
position: absolute;
top: 0;
padding-top: 7em;
min-height: 100%;
box-sizing: border-box;
}
內容一直延伸到底部,即使文本很短。
當內容的文本長於我們的窗口高度時 - 我們得到自動滾動
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.