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

Question

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

8

I have this html structure:

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

我希望页面高度固定，与屏幕高度相等，并且我还想让scrollable_content div拥有垂直滚动条。

我尝试了以下样式，但是得到的页面比屏幕大，因此出现了两个滚动条：

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

如何使用CSS3实现这个功能？

编辑：我找到了一个使用jQuery的解决方案（见下文）。请问是否可以仅使用CSS3实现此功能？

提前感谢！

- alf

#header和#inner_header是否有固定的高度？如果是，可以仅使用CSS完成。 - Vitor M

4个回答

1

我的建议：

- 运行一些JavaScript来重新调整容器div /可滚动内容div的大小，使其始终为浏览器的100％高度。如果人们调整、最大化等浏览器窗口，您的高度将会偏差。

- 根据网站/应用程序，您可以在计时器（setTimeout）上或侦听浏览器的调整事件上进行此操作。

- 查看：jQuery - 动态div高度 - 或者

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; 

}

- Ryan Ternier

如果他在使用％，那么调整大小仍然可以解决他的问题 - 对吗？ - mrtsherman

但是他并不受限制，不能使用它。 - Ryan Ternier

@RyanTernier - 谢谢！是的，看起来可以使用JS / jQuery完成。我刚刚发布了一个使用jQuery找到的解决方案。现在我想知道是否可能仅使用CSS3实现。 - alf

0

这是我目前使用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);

- alf

我认为你的链接不太对。它似乎没有按照你所描述的方式运作。我还注意到你的<style>标签在<script>标签内部。 - mrtsherman

抱歉，我漏掉了脚本标签的类型属性。现在在Chrome和Opera中已经可以工作了。 - alf

0

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

希望这就是您需要的。

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

- buhbang

将div#scrollable_content的边框去掉并将宽度设为100%会更好看。 - buhbang

1

实际上，这个解决方案取决于浏览器的高度。如果我使用低分辨率的屏幕（例如手机），它看起来与使用高分辨率屏幕非常不同。 - alf

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mrtsherman · Accepted Answer

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

http://jsfiddle.net/gX2DG/

为了获得一个仅出现在标题下方的单个滚动条，您需要修改CSS。这个CSS只适用于固定高度的标题。

将html/body的margin/padding归零并设置overflow:hidden，以便它们不会触发主浏览器滚动条
将body设置为100%高度，以便我们可以在其中设置divs的100%
绝对定位包含可滚动内容的子div。然后使用left、right、top、bottom来拉伸它以填充屏幕。

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