CSS溢出：自动超出边界

我有一个问题，结合div盒和溢出：自动属性添加滚动条，如果需要。CSS溢出：自动超出边界

问题是我不希望整个页面是可滚动的，但只是内容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/

我只能得到这个与固定的标题高度一起工作，有没有动态标题大小的解决方案？这对我来说很难相信...

感谢&问候

来源

2014-03-12 user3410218

我想你找overflow-y: scroll;呢？

见琴：http://jsfiddle.net/3n7ay/5/

来源

2014-03-12 10:51:07 nickspiel

这不幸的是不会解决问题。如果我向body添加overflow-y，它会显示整个身体的滚动条，这是不需要的。我只需要content-div上的滚动条。 – user3410218

因此，把overflow-y：然后滚动content-div。正如我在我的小提琴中。 – nickspiel

如果设置height: 100%到content元素，你也有你的视标头，这将使前者不视自身内部完全可见。

因此，必须通过JavaScript（如果您需要支持较旧的浏览器）或通过CSS3 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); 
}

来源

2014-03-12 10:55:00 fcalderan

这听起来很有希望。如果我有一个根据内容大小动态调整大小的标题，解决方案是什么？这正是这种情况。 – user3410218

@ user3410218如果'calc'很有前途，那么* flex box *呢？ – Witcher42

尝试弹性框，如果你不关心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; 
}

Flex的内容：

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

见琴：http://jsfiddle.net/r4JUk/4/

来源

2014-03-13 10:28:34 Witcher42

CSS溢出：自动超出边界

回答

相关问题