CSS：

Question

在过去的几个小时里，我一直在猛烈地撞墙，想办法实现我想要的webapp布局。我的头疼。

基本上我需要的是一个完整的窗口布局（全宽，全高，无滚动 - 永远）。应使用两个不同的水平框覆盖100％的宽度和高度（您可以将它们视为行）。

第一个框/行的高度可以是变量（将其视为页面的标题）
下面的那个应该占据空间的剩余部分，而不会超过100％的窗口，因此没有显示滚动条。

现在更棘手的是，在第二个框/行中，我希望内容以内部垂直滚动显示。想象一下，第二个框/行包含一个项目列表，如果项目非常少，则框/行的底部应该在内容之后停止。在许多物品的情况下，盒子/行应该向右扩展，直到它达到窗口高度的100％（这基本上是窗口的100％ - 第一个盒子/行所占据的高度）。通过在第二个框/行中滚动，可以看到其余内容。

我有意义吗？

关于代码，我不会复制/粘贴我已经拉到一起的灾难性的东西，因为我宁愿从空白页面开始。

这就是我的尝试：

<html>
  <body>
    <div id="wrapper">
      <div class="box">Header</div>
      <div class="box">Content <ul><li>...</li>(x1000)</ul></div>
    </div>
  </body>
</html>

我使用“box”类的原因是因为两个框/行应该在背景，边距，阴影等方面显示相同的外观。

html, body {
  height: 100%;
}

#wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 15px;
  right: 15px;
  top: 15px;
  bottom: 15px;
}

对于其他人，我刚试过（并且到目前为止失败）通过添加有害.box等来操纵overflow: hidden; overflow-y: scroll; height: 100%; max-height: 100%; min-height: 100%;元素。

提前感谢您的帮助！

Answer 1

问题是因为CSS长期以来一直很难将高度自动调整到可用空间。

解决方案是使用一个设置为position: absolute的包装器并绑定到视口的顶部，左侧，右侧和底部边缘。有了这个，浏览器将自动调整元素的高度，如果你的内容div里面有height: 100%，它将始终填充该空间。

在包装器上设置overflow-y: scroll将允许内容在内容过长时滚动：

http://codepen.io/helion3/pen/jwbcx

网站标题的高度通常不变。如果您使用百分比定义网站标题，并且如果您不需要支持IE＆lt; 8，则可以使用box-sizing: border-box安全地使用百分比来实现相同目标。

Answer 2

我相信这应该可以解决问题。

如果您调整.header的高度，请使其等于top:

的.content位置

CSS：

html, body {
  margin: 0;
}

.header {
  height: 150px;

  background: #0080ff; // (Unnecessary, this is set to help you see the header div)
}

.content {
  position: absolute;
  top: 150px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;

  background: #ff8000; // (Unnecessary, this is set to help you see the content div)
}

HTML：

<body>
  <div id="wrapper">
    <div class="box header">Header</div>
    <div class="box content">Content</div>
  </div>
</body>

Answer 3

也许你想要像this这样的东西？我将class="box"替换为id，但它应该有效。

Answer 4

考虑以下事项：

无需使用“绝对”定位div（在您的示例中为#wrapper）
创建2个与您在示例中创建的盒子div（.box）
第二个框应该有“overflow：auto”样式属性
使用javascript
计算剩余高度并将此值指定为第二个框的高度，最小高度和最大高度。就是这样。

您可以在此处查看解决方案： http://webnflash.com/temp/occupyAvailableHeight.htm

100％高度的窗口与内部div滚动

4 个答案:

CSS：

HTML：