始终将子 div 放置在父 div 的底部答案

【问题标题】：Placing a child div always bottom of the parent div始终将子 div 放置在父 div 的底部
【发布时间】：2015-10-22 18:56:52
【问题描述】：

我正在尝试设计一个 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;

}

具有“底部”类的 div 应始终位于具有“内容”类的 div 的底部，其中其他 div 是固定的

【问题讨论】：

您所寻求的类似于“粘页脚”技术。谷歌并阅读此内容以将其应用于您的案例

标签： html css

【解决方案1】：

如果您将 .wrapper 设置为 100% 高度，.content 也将是高度的 100%，.bottom 将位于此 div 的底部。这可能不是您想要的行为，但它是您问题的答案（我们没有关于整个事情应该如何工作/扩展/滚动/与内容对齐的信息）

【讨论】：