Question

我在组合div框和overflow：auto属性时遇到问题，如果需要，可以添加滚动条。

问题在于我不希望整个页面可滚动，而只是内容div，因此我添加了溢出：隐藏到正文并溢出：自动转到内容。

body
{
    padding: 0;
    margin: 0; 
    background-color: navy; 
    overflow: hidden; /** no scrollbar on whole page **/
    height: 100%;
}

#content
{
    background-color: green;
    overflow: auto; 
    height: 100%;
}

然而，我无法看到页面的末尾，因为div的大小超出了网站的可见部分。

请建议如何解决此问题并仅保持内容div可滚动。我在此处上传了一个问题示例：jsfiddle.net/3n7ay/

我只能使用固定的标题高度来实现这一点，是否有动态标题大小的解决方案？我很难相信......

谢谢＆amp;此致

Answer 1

我认为您正在寻找overflow-y: scroll;？

请参阅小提琴：http://jsfiddle.net/3n7ay/5/

Answer 2

如果您将height: 100%设置为content元素并且视口中还有一个标题，则会使前者在视口内部不完全可见。

因此，必须通过javascript（如果您需要支持旧浏览器）或通过CSS3 100% - <header height>功能将高度定义为calc()，例如

#content {   
   height: -webkit-calc(100% - <height of header>px);
   height: -moz-calc(100% - <height of header>px);
   height: calc(100% - <height of header>px);
}

Answer 3

如果您不关心Ie8和Ie9，请尝试使用弹性框。您可以在 caniuse.com 中查看兼容性情况：flexbox

使容器成为弹性盒子：

#container {
    background-color: yellow;
    height: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

灵活播放内容：

#content {
    background-color: green;
    overflow: auto;
    height: 100%;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

请参阅小提琴：http://jsfiddle.net/r4JUk/4/

CSS溢出：自动超出div边界

3 个答案: