2

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

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

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

在此处查看 JsFiddle

我怎样才能阻止这个？谢谢！

4

3 回答 3

2

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 决定专门反对 Web 标准，因为在这种情况下，这些标准毫无意义。为什么我希望某些东西是浏览器窗口的确切高度？唯一的一次是<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;
}

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

于 2012-10-10T19:14:32.980 回答
2

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

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

The top and bottom divs are position absolutely at the top and bottom, with a width of 100%. The wrapper div has height: 100%, box-sizing: border-box, and top and bottom padding equal to the height of the top and bottom divs, respectively. This causes it to fill the viewport but have padding underneath the top and bottom divs. The middle div has a height of 100% so it fills the content box of the wrapper (i.e., 100% minus the top and bottom paddings). It has position: relative, which leaves you free to use height: 100% on both interior boxes.

Lastly, middleleft is positioned absolutely and middleright has a left margin equal to its width, which causes it to fill the remaining horizontal space.

于 2012-10-11T02:58:09.873 回答
1

我不确定您到底想做什么，但另一种方法是将身体高度设置为 100%，然后将滚动窗格设置为“高度：自动”。然后对于“顶部”和“底部” 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>

试试那个...

于 2012-10-10T19:26:09.457 回答