Div不会延伸到页面底部
Div不会延伸到页面底部
提问于 2018-09-14 03:40:10
我正在尝试让<div>延伸到页面的底部。我希望这个<div>是我页面左侧的一个类似条的东西。当我打开页面时，它确实会沿着左侧伸展，但当我向下滚动时，它就不再伸展了。问题是我有多个<div>相互包装在一起，但我说的这个元素只是<html>和<body>元素的子元素。我尝试了很多方法来让它正常工作，但height:auto;、height:100%;或height:inherit;似乎不能工作，但如果我使用height:000px;，它就能工作。我还应该提到的是，<html>和<body>都有height:100%;和width:100%;。
代码如下所示：
.leftbar {
background-color: rgba(0,0,0,0.85);
width: 10%;
height: 100%;
float: left;
position: relative;
left: 0;
margin-top:0;
bottom:0;
right:0;
overflow: hidden;
}更让我困惑的是，我在页面的底部也有一个页脚，但它工作得很好。它可以伸展到我需要的程度。它的代码如下所示：
.footer {
background-color: rgba(0,0,0,0.85);
width: 100%;
height: 50px;
position: relative;
bottom: 0;
}你能告诉我为什么左边的横杆不能伸展吗？
回答 2
Stack Overflow用户
发布于 2018-09-14 06:46:59
你可以试一试
height: 100vh;
请记住，height: 100%填充的高度是其父容器的100%。如果父容器没有到达底部，那么左栏就无法到达底部。
Stack Overflow用户
发布于 2018-09-14 17:44:11
满足您的需求的关键点是使用：height: 100vh
但是，您必须意识到，如果sidebar的内容比sidebar容器长，那么当您向下滚动到100vh上时，sidebar背景将会丢失。
所以，使用min-height: 100vh更好。
希望这能有所帮助。
* {
box-sizing: border-box;
}
.container::after {
display: table;
content: "";
clear: both;
}
.sidebar {
float: left;
width: 200px;
min-height: 100vh;
background: #f0f0f0;
border: 1px solid #ededed;
}
.main-container {
padding: 20px;
height: 1200px;
float: left;
width: calc(100% - 200px);
background: #ddd;
}
.footer {
background: yellow;
padding: 20px;
}<div class="container">
<div class="sidebar">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
<div class="main-container">
This main container is very long.
</div>
</div>
<div class="footer">
Yay! you found footer.
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52320702
复制相关文章
相似问题