【问题标题】：100% height of window with inner div scrolling内部 div 滚动的 100% 窗口高度
【发布时间】：2014-02-06 07:19:42
【问题描述】：

在过去的几个小时里，我一直在努力寻找一种方法来实现我想要的 web 应用程序布局。而且我的头很痛。

基本上我需要的是一个完整的窗口布局（全宽、全高、无滚动 - 永远）。应使用两个不同的水平框（您可以将它们视为行）覆盖 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>

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

html, body {
  height: 100%;
}

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

对于其余部分，我刚刚尝试（但到目前为止失败）通过添加危险的 overflow: hidden; overflow-y: scroll; height: 100%; max-height: 100%; min-height: 100%; 等来操纵 .box 元素。

提前感谢您的帮助！

【问题讨论】：

您可以将代码添加到小提琴中吗？

标签： html css layout

【解决方案1】：

问题是因为 CSS 长期以来一直对自动调整高度以适应可用空间感到很糟糕。

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

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

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

网站标题的高度通常不可变。如果您使用百分比定义站点标题，并且不需要支持 IEbox-sizing: border-box 来实现相同的目的。

【讨论】：

就我的理解而言，这是否意味着我不应该指定 100% 的高度？我的意思是，定义position: absolute; top: 0; bottom: 0 与定义height: 100% 基本相同？同样适用于宽度？假设我想在包装器周围留一个小边距，我可以简单地指定position: absolute; top: 15; bottom; 15吗？
您可以为内容 div inside 指定 height: 100% 绝对定位的包装器。

【解决方案2】：

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

如果你调整.header的高度使其等于.content的top:位置

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>

【讨论】：

谢谢 - 这几乎正是我想要的。不过还有一个附加问题：使用建议的解决方案，box content 是完全可滚动的。就我而言，我希望 box 拥有例如标题和简短描述 - 也应始终可见；我该怎么做才能只有例如<p> 或 <div> 可滚动，在 box content?在这种情况下，这意味着结构将是body > #wrapper > box.content > p.scrollable。
不太确定我是否理解你。您不希望 .content 可滚动，而是希望 .content 内的 div 可滚动？你能画出一幅图像来显示你所指的功能吗？

【解决方案3】：

也许您想要this 之类的东西？我用ids 替换了class="box"，但它应该可以工作。

【讨论】：

【解决方案4】：

考虑以下事项：

无需“绝对”定位的 div（在您的示例中为 #wrapper）
创建 2 个与您在示例中创建的相同的框 div (.box)
第二个框应该有“overflow:auto”样式属性
用javascript计算页眉高度和全屏高度
计算剩余高度并将该值指定为第二个框的高度、最小高度和最大高度。就是这样。

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

【讨论】：