Question

我有这个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？

提前致谢！

Answer 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;
}

Answer 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; 

}

Answer 3

使用mrtsherman的代码，我已经解决了你的问题：）

我希望就是这样。

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

Answer 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);

在固定高度页面中使用滚动条划分

4 个答案: