CSS溢出：自动脱离div边界

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

问题是，我不希望整个页面可以滚动，而只希望内容div可以滚动，因此我在正文中添加了overflow:hidden，在内容中添加了overflow:auto

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的大小超出了网站的可视部分

请建议如何解决此问题，并仅保持content div可滚动。 我在这里上传了我的问题示例：

我只能在固定收割台高度的情况下使用，动态收割台尺寸没有解决方案吗？我很难相信

---

谢谢和问候

我想你正在寻找

overflow-y:scroll而不是

请参见fiddle:
如果您将
高度：100%
设置为
内容
元素，并且您的视口中也有一个标题，这将使前者在视口内部不完全可见

因此高度必须定义为
100%-
，可以通过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);
}

#内容{
高度：-webkit计算（100%-px）；
高度：-moz计算（100%-px）；
高度：计算（100%-px）；
}
如果您不关心Ie8和Ie9，请尝试flex box。您可以在caniuse.com中看到兼容性情况：

将容器设为柔性箱：

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

请参阅fiddle:
不幸的是，这无法解决问题。如果我向主体添加overflow-y，它将显示整个主体的滚动条，这是不需要的。我只需要content-div上的滚动条，所以在content-div上放置overflow-y:scroll。就像我的小提琴一样，这听起来很有希望。如果我有一个根据内容大小动态调整大小的标题，那么解决方案是什么？这里的情况正是如此。@user3410218如果
calc
很有希望，那么flex-box呢？