Question

这里有一个例子，如果div是使用min-height的身体的子元素，我想要正常工作：

<!DOCTYPE html>
<html>
<head>
<style>
html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.outer-wrap{
  min-height: 100%;
}
.table-layout{
  display: table;
  min-height: 100%;
  width: 100%;
}
.table-cell{
  display: table-cell;
  width: 50%;
  padding: 2%;
}
.blue{
  background: #55a;
}
.grey{
  background: #bbb;
}
</style>
</head>
<body>
  <div class="outer-wrap">
    <div class="table-layout">
      <div class="table-cell blue">
        test
      </div>
      <div class="table-cell grey">
        content<br />
        <br />
        content<br />
        <br />
        content<br />
        <br />
      </div>
    </div>
  </div>
</body>
</html>

https://codepen.io/anon/pen/OjxmGj

然而，当我添加一个最小高度的外部div：100％;内部div不再填充身体的高度：

<!DOCTYPE html>
<html>
<head>
<style>
html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.outer-wrap{
  min-height: 100%;
}
.table-layout{
  display: table;
  min-height: 100%;
  width: 100%;
}
.table-cell{
  display: table-cell;
  width: 50%;
  padding: 2%;
}
.blue{
  background: #55a;
}
.grey{
  background: #bbb;
}
</style>
</head>
<body>
    <div class="table-layout">
      <div class="table-cell blue">
        test
      </div>
      <div class="table-cell grey">
        content<br />
        <br />
        content<br />
        <br />
        content<br />
        <br />
      </div>
    </div>
</body>
</html>

https://codepen.io/anon/pen/JyrNVj

对我来说，更新整个布局以使其正常工作并不实用，所以我希望有另一种方法可以在不删除外部div的情况下完成这项工作。

Answer 1

插入＆＃34;身高：100vh;＆＃34;内心的div。

有关详细信息，请参阅此SO post on Viewport-Percentage。

使用Inspect，这似乎产生了预期的结果。

Answer 2

只需将 height: 1px 添加到课程outer-wrap并保留min-height: 100%。

＆＃13;

html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.outer-wrap{
  min-height: 100%;
  height: 1px;
}
.table-layout{
  display: table;
  min-height: 100%;
  width: 100%;
}
.table-cell{
  display: table-cell;
  width: 50%;
  padding: 2%;
}
.blue{
  background: #55a;
}
.grey{
  background: #bbb;
}

＆＃13;

<div class="outer-wrap">
  <div class="table-layout">
    <div class="table-cell blue">
      test
    </div>
    <div class="table-cell grey">
      content<br />
      <br />
      content<br />
      <br />
      content<br />
      <br />
    </div>
  </div>
</div>

＆＃13;

Answer 3

您可以在两个元素上将min-width更改为width，并添加overflow-y: visible;以允许其在必要时垂直扩展：

.outer-wrap {
  height: 100%;
  overflow-y: visible;
}
.table-layout {
  display: table;
  height: 100%;
  overflow-y: visible;
  width: 100%;
}

https://codepen.io/anon/pen/dzVRvN

如何使内部div至少匹配身体的高度？

3 个答案: