我正在尝试设计一个 html 布局,其中子 div 应始终保留在父 div 的底部。默认情况下,父 div 的高度应为 100%。请为我提供相同的解决方案。
链接:https://jsbin.com/pihekufime/edit?html,css,output
HTML:
<div class="wrapper">
<div class="header"></div>
<div class="left">menu</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing...
<div class="bottom">index</div>
</div>
</div>
CSS:
html, body {
height: 100%;
padding:0
margin:0;
}
.header {
background: #4a90e2;
height: 100px;
position: fixed;
width:100%;
}
.left {
position: fixed;
height: 100%;
top: 100px;
background: #F44336;
width: 20%;
}
.content {
position: relative;
height: 100%;
top: 100px;
left: 20%;
background: #555;
width: 80%;
color:#fff;
min-height: 100%;
}
.bottom {
position: absolute;
bottom: 0px;
background: yellow;
}
类为'Bottom'的div应该始终位于类为'Content'的div的底部,其中其他div是固定的
最佳答案
如果将 .wrapper
设置为 100% 高度,则 .content
也将为高度的 100%,而 .bottom
将位于该 div 的底部。这可能不是你想要的行为,但它是你问题的答案(我们没有关于整个事情应该如何工作/展开/滚动/与内容对齐的信息)
关于html - 将子 div 始终放置在父 div 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33278683/