Question

我有一个中间容器，可以占用屏幕上剩下的任何垂直空间。在其中，我放置了一个当前设置为200px的Jquery滚动条：

.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 100%;
}

但是，如果我将.scroll-pane高度设置为100％，它只会删除滚动条并拉伸整个页面。

See JsFiddle here

我怎么能阻止这个？谢谢！

Answer 1

height: 100%永远不会像你想要的那样工作。 CSS规范规定它必须等于浏览器窗口的高度，或者指定了绝对高度的最近的父块级元素。这意味着此代码将应该不能按预期工作：

<!DOCTYPE html>
<html>
 <head>
  <title>Want the body to fill the page? Too bad!</title>
  <style type="text/css">
   html, body {
    height: 100%;
   }
   .page {
    padding-top: 50px;
    box-sizing: border-box;
    height: 100%;
   }
   .header {
    margin-top: -50px;
    height: 50px;
   }
   .body {
    height: 100%;
    background: gray;
   }
  </style>
 </head>
 <body>
  <div class="page">
   <div class="header">
    <h1>Too bad!</h1>
   </div>
   <div class="body">
    <p>Hello cruel world...</p>
   </div>
  </div>
 </body>
</html>

然而，这在Chrome中运行良好。为什么？我只能假设Google决定明确违反网络标准，因为在这种情况下，标准 毫无意义 。为什么我想要一些东西成为浏览器窗口的确切高度？唯一的一次是<div>包装整个页面;在这种情况下，一个简单的“高度相对于父块”规则可以很好地工作，而不会打破其他地方的期望。

但是，有一种解决方法。至少，这也是我在Firefox中尝试之前想说的。获得height: 100%（有一些限制）的另一种方法是使用position: absolute。但是，Firefox似乎并不尊重position: relative元素上的display: table-cell - 可能是那些讨厌的标准。无论如何，如果您有兴趣，这里是这种技术的代码：

#wrapper > div > #middleleft {
 position: relative;
}
.scroll-pane {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

那你能做什么？嗯，不幸的是，我还不知道答案。一个kludgy解决方案是让Javascript将高度设置为绝对像素值，并将事件附加到窗口大小调整以更新该高度。如果我找到更好的方法，我会回复你。

Answer 2

以下是我对此问题的解决方案（jsfiddle）。它使用这样的标记：

<div id="top">...</div>
<div id="wrapper">
    <div id="middle">...</div>
</div>
<div id="bottom">...</div>

top和bottom div的位置绝对位于顶部和底部，width为100%。包装器div具有height: 100%，box-sizing: border-box，顶部和底部填充分别等于顶部和底部div的高度。这会导致它填充视口，但在顶部和底部div下面有填充。 middle div的高度为100%，因此它填充了包装器的内容框（即100%减去顶部和底部填充）。它有position: relative，您可以在两个内部框中自由使用height: 100%。

最后，middleleft绝对定位，middleright的左边距等于其宽度，这会使其填充剩余的水平空间。

Answer 3

我不确定你想要做什么，但另一种方法是将身高设置为100％，然后将scrollpane设置为“height：auto”。然后对于“顶部”和“底部”div使用固定定位，加上等于顶部/底部高度的边距。

body {
    height: 100%;
}
.top {
    position: fixed;
    top: 0;
    height: 100px;
}
.middle {
    height: auto;
    margin: 100px auto;
}
.bottom {
    position: fixed;
    bottom: 0;
   height: 100px;
}

<div class="top">content</div>
<div class="middle">content</div>
<div class="bottom">content</div>

试试......

试图将JScrollPane高度设置为100％而不拉伸容器？

3 个答案: