Html 如何使用div在底部和顶部分割屏幕，底部为固定高度，顶部占用剩余空间_Html_Css

Html 如何使用div在底部和顶部分割屏幕，底部为固定高度，顶部占用剩余空间

html css

Html 如何使用div在底部和顶部分割屏幕，底部为固定高度，顶部占用剩余空间,html,css,Html,Css,如何使用div将HTML页面分成两行，其中底部div的高度为100px，顶部div占用剩余空间目前，我有以下内容，但这里顶部div与底部div重叠： html，身体，反对{ 身高：100%；宽度：100%；边际：0px；填充：0px； } div{ 边际：0px；填充：0px； } #主容器{ 位置：相对位置；身高：100%；宽度：100%； } #顶部容器{ 边框：1px纯红；位置：绝对位置；顶部：0px；左：0px；身高：100%；宽度：100%； } #底部容

如何使用div将HTML页面分成两行，其中底部div的高度为100px，顶部div占用剩余空间

目前，我有以下内容，但这里顶部div与底部div重叠：

html，
身体，
反对{
身高：100%；
宽度：100%；
边际：0px；
填充：0px；
}
div{
边际：0px；
填充：0px；
}
#主容器{
位置：相对位置；
身高：100%；
宽度：100%；
}
#顶部容器{
边框：1px纯红；
位置：绝对位置；
顶部：0px；
左：0px；
身高：100%；
宽度：100%；
}
#底部容器{
边框：1px纯蓝色；
位置：绝对位置；
底部：0px；
左：0px；
高度：100px；
宽度：100%；
}


这是最高级别
这是最下面的部分

只需将

#topContainer

更改为

#topContainer {
  border: 1px solid red;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 100px;                //set bottom
  height: calc(100% - 100);     //calculate height
  width: 100%;
}

其余代码运行良好

下面是更新的代码片段

html，
身体，
反对{
身高：100%；
宽度：100%；
边际：0px；
填充：0px；
}
div{
边际：0px；
填充：0px；
}
#主容器{
位置：相对位置；
身高：100%；
宽度：100%；
}
#顶部容器{
边框：1px纯红；
位置：绝对位置；
顶部：0px；
左：0px；
底部：100px；
高度：计算（100%-100%）；
宽度：100%；
}
#底部容器{
边框：1px纯蓝色；
位置：绝对位置；
底部：0px；
左：0px；
高度：100px；
宽度：100%；
}


这是最高级别
这是最下面的部分

尝试以下html标记：

<div class="top">
   This is your top div
</div>
<div class="bottom">
  This is your bottom div
</div>

这里是Injshiddle：

除了朋友们说的上述方法之外

您可以使用

显示：表格它永远不会与顶部div重叠底部div
对于显示<代码>显示：表格在IE9中，您可以使用
<meta http-equiv="X-UA-Compatible" content="IE=edge">


这是最高级别
这是最下面的部分
html，
身体，
反对{
身高：100%；
宽度：100%；
边际：0px；
填充：0px；
}
div{
边际：0px；
填充：0px；
}
#主容器{
位置：相对位置；
身高：100%；
宽度：100%；
}
#顶部容器{
边框：1px纯红；
位置：绝对位置；
顶部：0px；
左：0px；
身高：86.1%；//准确百分比
宽度：100%；
}
#底部容器{
边框：1px纯蓝色；
位置：绝对位置；
底部：0px；
左：0px；
高度：100px；
宽度：100%；
}
这是最高级别
这是最下面的部分
此解决方案的问题是，最终顶部div将与底部div重叠。我真的需要让顶部div占用底部div之后剩余的所有空间否，底部将与顶部重叠。实际上，它将使top div占用底部div之后剩余的所有空间。我想你的意思是，*top div只占用底部div之后剩余的空间。无论如何，我很高兴你找到了解决方案。正如我在原始问题中提到的，我试着使用display:table；选项不幸的是，IE9对我们来说是一个要求，但它不能很好地工作。我在IE9测试中编辑了解决这个问题的答案谢谢你，这也能解决问题！非常感谢您的帮助。@ShrinivasShukla不是影响topcontainer宽度的解决方案吗？为什么它会影响宽度
？它仍然像以前一样100%。@ShrinivasShukla这就是我应用解决方案时得到的结果。。只是想学。。
<meta http-equiv="X-UA-Compatible" content="IE=edge">

html,
body,
object {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
div {
  margin: 0px;
  padding: 0px;
}
#mainContainer {
  position: relative;
  height: 100%;
  width: 100%;
}
#topContainer {
  border: 1px solid red;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 86.1%; // exact percentage
  width: 100%;
}
#bottomContainer {
  border: 1px solid blue;
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 100px;
  width: 100%;
}
<body>
  <div id="mainContainer">
    <div id="topContainer">
      This is the top div
    </div>
    <div id="bottomContainer">
      This is the bottom div
    </div>
  </div>
</body>