html - 将子 div 始终放置在父 div 的底部

标签 html css

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

相关文章:

css - Bootstrap mobile nav,想要 "drop over"现有内容(z-index)

javascript - ImageMapster - jquery/html 问题

html - 如何将我的内容移动到某些 float div 下方?

javascript - 如何用自己网站的数据填写另一个网站的表格

css - 如何在 testcafe 中获取标签的 css 属性?

html - 手机上的固定按钮闪烁

javascript - HTML - 整数的输入范围

html - Inline-Flex 与垂直对齐混淆

javascript - 在 Google Chrome 中正确打印 PDF

HTML + CSS 水平有序的表单元素