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

时间:2015-07-29 05:43:44

标签: html css

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

目前我有以下内容,但是这里top div与底部div重叠:

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: 100%;
  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>

我尝试过使用display:table;这在Chrome和Firefox中运行良好,但遗憾的是不在IE9中(这是一项要求)。任何帮助将不胜感激。

4 个答案:

答案 0 :(得分:2)

只需将#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,
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;
  bottom: 100px;
  height: calc(100% - 100);
  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>

答案 1 :(得分:2)

除了以上方法,朋友们说

你可以使用display: table;它从不顶部div重叠底部div

对于IE9中的show display: table;,您可以使用

<meta http-equiv="X-UA-Compatible" content="IE=edge">

html&amp;的CSS:

html,
body,
object {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
div {
  margin: 0px;
  padding: 0px;
}
#mainContainer {
  display: table;
  height: 100%;
  width: 100%;
}
#top{
  display: table-row;
}
#topContainer {
  display: table-cell;
  border: 1px solid red;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
#bottom{
  display: table-row;
}
#bottomContainer {
  display: table-cell;
  border: 1px solid blue;
  bottom: 100px;
  left: 0px;
  height: 100px;
  width: 100%;
}
<html>
<head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
  <div id="mainContainer">
    <div id="top">
      <div id="topContainer">
        This is the top div
      </div>
      </div>
    <div id="bottom">
      <div id="bottomContainer">
        This is the bottom div
      </div>
    </div>
  </div>
</body>
</html>

答案 2 :(得分:0)

试试这个html标记:

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

匹配样式:

.bottom {
    position: fixed; 
    bottom: 0px; 
    width: 100%; 
    height: 100px; 
    /*  Added styles for demo */
    background-color: black;
    color: white;
}

这是一种伤害:https://jsfiddle.net/b59y4f1s/1/

答案 3 :(得分:0)

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>