让溢出在具有背景的 100% 高度 div 上工作答案

【问题标题】：Getting overflow to work on 100% height div with background让溢出在具有背景的 100% 高度 div 上工作
【发布时间】：2014-07-18 18:45:40
【问题描述】：

我目前正在构建一个网站，该网站使用两列，在一个固定位置框内，以使高度保持在 100%。

如果内容比页面长（在 11/13" 屏幕上，页面是响应式的），我需要内容 div 向下滚动 - 但是通过在内容上设置溢出滚动，背景不会下降，并且有页面底部仍然有内容。

这里有两个链接，一个是原样的页面，另一个是有额外内容的页面（让它比你的视口长）

Link 1 link 2

如果你能帮我解决这个问题，我将不胜感激:)

【问题讨论】：

@user3168736 link - 不！

标签： html css height

【解决方案1】：

添加 Overflow:auto; 效果很好。我用那个页面检查了它。

【讨论】：

我可以在那里看到一个滚动条。您想在哪里添加这些滚动条？
滚动条在正确的位置，但背景没有拉伸到底部，屏幕外还有内容。
如果这样做，则将溢出属性添加到该容器。我假设内容低于该中心 div。所以给它的父级添加溢出

【解决方案2】：

问题是.bf_page 设置为height: 100% - 这是body 的完整高度，但是 div 不是从页面顶部开始，所以它继续在底部下方body 标记为 100 左右像素，这意味着最后一点内容被切掉了（希望这是有道理的？！）。

徽标的高度（导致页面扩展）为 121 像素，因此您可以执行以下操作：

将.bf_page的高度更改为：

.bf_page {
    height: calc(100% - 121px);
}

将.bf_content_text 设置为overflow: auto

我已经测试过了，它似乎可以工作。

【讨论】：

太棒了！非常感谢。
别担心，乐于助人。

【解决方案3】：

取出“位置：固定；” '.bf_menu' 类对我有用，如果您无法将菜单固定在页面顶部，只需使用 display:none 隐藏块引用 div。

【讨论】：

我试过这个，但是两个 div 都需要拉伸到底部。 link
你把我弄丢了，你的意思是左边的菜单应该一直可见吗？
不是必须的，只是背景需要拉伸到底部。

【解决方案4】：

例子：

<div id="wrapper">
    <div id="content">
        <div id="data">
        </div>
    </div>   
</div>

#wrapper {
    height:100vh;
    width:100vw;
    background-color:black;
    position:absolute;
}

#content {
    background-color:red;
    height:80%;
    width:80%;
    position:relative;
    overflow-y:auto;
}

#data {
    background-color:yellow;
    width:80%;
    height:1000px;
}

http://jsfiddle.net/nGU8R/1/

【讨论】：

我这辈子都想不出把这个演示中的样式放在哪里——代码不是我的，是同事的。真是一团糟，嗯？