Question

我试图让<body>元素占用至少浏览器窗口的100％高度，但也扩展到任何内容。我也试图使其唯一的<div>子元素占据<body>高度的100％。

插图

这就是目前正在发生的事情;案例A是问题，案例B按预期工作。

在案例A中，div.page-content（红色框）应扩展为body（蓝色框），但不会。

代码

这就是我所拥有的。

CSS

html {
  height: 100%;
}

body {
  min-height: 100%;
  padding-top: 57px;
}

.page-content {
  height: 100%;
}

HTML

<html>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top"></nav>
    <div class="page-content">
      <div class="page-container"></div>
    </div>
  </body>
</html>

请注意，nav元素是静态定位的，因此不会影响布局。

身体没有指定height，因为我希望身高为auto所以它会延伸到内容，但我不希望身高低于浏览器窗口。

正文符合预期，div.page-content只是调整自己的内容，而不是伸展到body的高度。

有没有办法在不使用javascript的情况下实现所需的行为？

Answer 1

将overflow:visible;添加到body，将min-height:100%;更改为height:100%; body，height:100%;更改为min-height:100%; .page-content }}

Answer 2

跳过page-content并使用body作为主要容器，因此您可以跳过面临的继承问题。

例如

* {
  box-sizing: border-box
}
html {
  padding-top: 50px;
  height: 100%;
  background: white;
}
body {
  min-height: 100%;
  background: turquoise;
  margin: 0 2em;
  border:solid; /* see me */
}
nav {
  position: fixed;
  height: 50px;
  top: 0;
  left: 2em;
  right: 2em;
  background: tomato;
}

<nav class="navbar navbar-inverse navbar-fixed-top"></nav>
<div class="page-container"></div>

使子元素100％高度的BODY元素也是100％

2 个答案: