Question

我想创建两个div，其中一个没有JS而且支持IE8。

每个都有100％的宽度。
每个都具有嵌套布局的相对或绝对定位。
顶部div按内容有高度，不固定（很重要）和整个剩余空间的底部div。

在我的例子中，底部div太短，我怎么能伸展到底部？

<html>
<head>
<style type="text/css"><!--
* {
    padding: 1px;
    margin: 0px;
    border: solid 1px;
    width: 100%;
}

#super {
    position: absolute;
    height: 100%;
}

#top {
    position: relative;
}

#bottom {
    position: relative;
    top: 0px;
    bottom: 0px;
}
--></style>

</head>
<body>
<div id="super">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>

Answer 1

您可以使用css表属性来创建此布局。

<强> HTML：

<div id="super">
  <div id="top">
    <div class="content">
      top
    </div>
  </div>
  <div id="bottom">
    <div class="content">
      bottom
    </div>
  </div>
</div>

必要的CSS：

html,
body {
  height: 100%;
}
#super {
  height: 100%;
  width: 100%;
  display: table;
}
#super > div {
  display: table-row;
}
#top {
  background: green;
}
#bottom {
  background: blue;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
#super {
  height: 100%;
  width: 100%;
  display: table;
}

#top {
  background: green;
  overflow: hidden;
  height: 1%;
}

.content {
  padding: 10px;
}

#bottom {
  background: blue;
}

#super > div {
  display: table-row;
}

<div id="super">
  <div id="top">
    <div class="content">
      top
    </div>
  </div>
  <div id="bottom">
    <div class="content">
      bottom</div>
  </div>
</div>

输出图片：

Answer 2

您可以使用display: table包装顶部和底部div的容器和表格行：

＆＃13;

* {
    padding: 1px;
    margin: 0px;
    border: solid 1px;
    width: 100%;
}
#super {
    display: table;
    position: absolute;
    height: 100vh;
}
#top {
    display: table-row;
    height: 1px;
    position: relative;
    background: orange;
}
#bottom {
    display: table-row;
    position: relative;
    top: 0px;
    bottom: 0px;
    background: teal;
}

＆＃13;

<div id="super">
<div id="top">top<br>top text</div>
<div id="bottom">bottom</div>
</div>

＆＃13;

Answer 3

使用flex-box

.parent{
  display: flex;
  flex-direction: column;
  min-height: 100vh
}
.child2{
  flex: 1;
  background: blue;
}

<div class="parent">
  <div class="child1"> first child</div>
  <div class="child2"> second child</div>
</div>

Demo 此处

Answer 4

试试这个：

#bottom {
position: relative;
top: 0px;
bottom: 0px;
HEIGHT: 800px;
}

所有剩余空间的第二次DIV

4 个答案: