固定高度页面中带有滚动条的 Div答案

【问题标题】：Div with scrollbar in fixed height page固定高度页面中带有滚动条的 Div
【发布时间】：2011-11-20 14:43:24
【问题描述】：

我有这个 html 结构：

<body>
    <div id="container">
        <div id="header">Not empty</div>
        <div id="content">
            <div id="inner_header">Not empty</div>
            <div id="scrollable_content">Very long content</div>
        </div>
    </div>
</body>

我希望页面具有与屏幕高度相等的固定高度，并且我还希望 div scrollable_content 有一个垂直滚动条。

我尝试过这些样式，但是我得到的页面比屏幕大，所以我得到了两个滚动条：

html, body {
    height:100%;
}
div#container {
    height:100%;
}
div#scrollable_content {
    height:100%;
    overflow-y:auto;
    position:absolute;
}

如何使用 CSS3 做到这一点？

编辑： 我找到了一个使用 jQuery 的解决方案（见下文）。我想知道这是否可以仅使用 CSS3？

提前致谢！

【问题讨论】：

#header e #inner_header 是否有固定高度？如果有的话，可以单独使用 CSS 来完成

标签： jquery html css

【解决方案1】：

当您对一个元素进行绝对定位时，它会脱离页面流程。请看看这个小提琴。请注意，绿色框会导致出现两个垂直滚动条。

http://jsfiddle.net/gX2DG/

要获得仅显示在标题下方的单个滚动条，您需要修改 CSS。此 CSS 仅适用于固定高度的标题。

将 html/body 上的边距/填充清零并设置 overflow:hidden 以便它们不会触发主浏览器滚动条
将 body 设置为 100% 高度，以便我们可以在其中的 div 上设置 100%
绝对定位将包含可滚动内容的子 div。然后使用左、右、上、下将其拉伸以填满屏幕。

http://jsfiddle.net/J4Ps4/

/* set body to 100% so we can set 100% on internal divs */
/* zero margin/padding and set overflow to hidden to prevent default browser scrollbar */
html, body { height:100%; margin: 0; padding: 0; overflow: hidden; }
div { margin: 0; padding: 0;  }

/* on child div give it absolute positioning and then use top/bottom to stretch it */
/* top must be equal to the height of the header */
div#scrollable_content {
  position: absolute;
  top: 50px;
  bottom: 0px;
  width: 100%;
  overflow-y:auto;
  border: 1px solid green;
}

【讨论】：

用更多提示更新了我的答案。很接近了。我知道有人可以解决这个问题。
这个 SO 问题也可能对您有所帮助 - stackoverflow.com/questions/90178/…
谢谢！我现在可以看到绝对位置的问题。我仍在寻找一个完美的解决方案，但这个很好:)
那么魅力三倍？我应该问标题是否固定高度。看到这个小提琴 - jsfiddle.net/7TqsE/22
难以置信的关闭 :) 页面现在长了 50 像素。如果滚动到页面底部，您可以看到问题。在我的场景中，标题更大，所以问题更明显。

【解决方案2】：

我的建议：

-运行一些 javascript 以重新调整容器 div / scrollable_content div 的大小，使其始终为浏览器的 100% 高度。如果人们调整浏览器窗口的大小、最大化等，您的高度将会关闭。

根据网站/应用程序，您可以在计时器 (setTimeout) 上使用此功能或监听浏览器的调整大小事件

查看：jQuery - dynamic div height

或

http://css-discuss.incutio.com/wiki/Hundred_Percent_Height

更新：

这就是我所说的：http://jsfiddle.net/7TqsE/21/

我只是把它作为一个调整大小的按钮，但是你可以看到如果你调整右下窗口的大小，然后点击按钮，它会调整那个 div 的大小，让你成为包含 div 的高度。

您还可以通过获取浏览器高度来扩展它（此示例包括宽度）。这个脚本不是我写的，和网上吐的一样，我只是复制一下：

if( typeof( window.innerWidth ) == 'number' ) { 

//Non-IE 

myWidth = window.innerWidth;
myHeight = window.innerHeight; 

} else if( document.documentElement && 

( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { 

//IE 6+ in 'standards compliant mode' 

myWidth = document.documentElement.clientWidth; 
myHeight = document.documentElement.clientHeight; 

} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { 

//IE 4 compatible 

myWidth = document.body.clientWidth; 
myHeight = document.body.clientHeight; 

}

【讨论】：

如果他使用%，那么调整大小应该仍然可以解决他的问题 - 是吗？
但他并没有被限制不使用它。
@RyanTernier - 谢谢！是的，它似乎可以用 JS/jQuery 来完成。我刚刚发布了一个使用 jQuery 找到的解决方案。现在我想知道这是否可以仅使用 CSS3。

【解决方案3】：

使用 mrtsherman 的代码，我已经为您制定了解决方案:)

我希望就是这样。

http://jsfiddle.net/zzlawlzz/Guq9K/2/

【讨论】：

在div#scrollable_content 中取消边框并将宽度添加到 100% 会更好看。
其实这个解决方案取决于浏览器的高度。如果我使用低分辨率屏幕（例如手机），它看起来与使用高分辨率屏幕有很大不同。

【解决方案4】：

这是我目前使用 jQuery 找到的解决方案：

window.setTimeout(function () {
$(document).ready(function () {
    var ResizeTarget = $('#content');
ResizeTarget.resize(function () {
    var target = $('#scrollable_content');
    target.css('height', $(document).height() - $("#header").height() - $("#inner_header").height());
}).trigger('resize');
}); }, 500);

【讨论】：

我认为您的链接不太正确。似乎不像你描述的那样行事。还注意到您的 <style> 标签在您的 <script> 标签内。
对不起，我错过了 script 标签的 type 属性。它现在在 Chrome 和 Opera 中为我工作。