將div大小拉伸到頁面底部
[英]Stretch div size to the bottom of the page
問題描述
我正在嘗試創建我的第一個網頁。 但我有一個問題，我搜索了很多，但我仍然無法解決它。 所以，問題是，我的div （類似於頁面左側的背景，它沒有內容，只有彩色背景）不會拉伸到頁面的底部，它只是延伸到底部屏幕，所以當我向下滾動div從那里丟失。 它看起來像這樣（ http://postimg.org/image/aiiabtue1/ ）
HTML：
<body>
<div class="left_strip"></div>
</body>
CSS：
.left_strip {
position: absolute;
left: 50%;
width: 203px;
height: 100%;
top: 158px;
background: rgb(251, 236, 236);
margin-left: -500px;
}
2 個解決方案
解決方案1
3 2015-05-24 20:11:24
在body標簽和bottom: 0使用position: relative height: 100%在.left_strip上使用bottom: 0而不是height: 100% 。
只有position: relative對於body標簽，元素將是100％高度，但由於距離頂部158px距離，底部將比內容低158px 。
bottom: 0將元素的底部固定到最近的“定位”（相對，絕對，固定）父元素的底部。
body { position: relative; } .left_strip { position:absolute; width:203px; top: 158px; bottom: 0; background-color: blue; } .content { height: 2000px; background-color: red; margin-left: 250px; }
<div class="content"></div> <div class="left_strip">Test content</div>
解決方案2
0 2015-05-24 20:08:56
而不是使用％嘗試使用body標簽的確切像素值。
使用高於100的％值也可能有所幫助，這似乎也適用於測試。
將div拉伸到頁面底部
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.