固定高度页中带有滚动条的Div
我有一个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？
提前感谢！
回答 4
Stack Overflow用户
发布于 2011-09-19 21:50:20
当您绝对定位一个元素时，它会从页面的流中产生。请看一下这把小提琴。注意，绿色框将导致出现两个垂直滚动条。
http://jsfiddle.net/gX2DG/
要获得只出现在标题下面的单个滚动条，您需要修改CSS。此CSS只适用于固定高度标头。
- 零出边距/填充在html/body上，并设置
overflow:hidden，这样它们就不会触发主浏览器滚动条 - set body到100%的高度，这样我们就可以在其内部设置100%的div，
- 绝对定位将包含可滚动内容的子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;
}Stack Overflow用户
发布于 2011-09-19 21:44:24
我的建议：
-Have一些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;
} Stack Overflow用户
发布于 2011-09-19 22:24:21
使用mrtsherman的代码，我已经给出了您的解决方案:)
我希望就是这样。
http://jsfiddle.net/zzlawlzz/Guq9K/2/
https://stackoverflow.com/questions/7477607
复制相似问题
腾讯云开发者
