html - height div 从上到下页面颜色问题

Question

我在这里搜索了一个回复，但我没有找到解决方案...

我对 div 高度有疑问。 我自己解释一下:我在页面顶部有一个菜单，其权重是固定的:50 像素。

我有一个 MainDiv，它是最小高度为 100% 的主要 div。我已经将 Height:100% 放到 html 和 body 中。我的问题是我的 MainDiv 的背景颜色没有从页面的顶部到底部。我知道这是因为我的菜单有一个固定的高度，但我不知道如何改变它..

html {
  height: 100%;
}

body {
    background-image: url('../../Images/fond2.jpg');
    background-size: cover;
    background-attachment:fixed;
    background-position: left top;
    margin: 0;
    height: 100%;
}

#menuBackground {
    background:#2f3036;
    text-align: center;
    width : 100%;
    height : 50px;
    display : relative;
}

#MainDiv{
    max-width:850px;
    min-height: 100%;
    margin: 0 auto;
    background-color:#E0CDA9;
    display : absolute;
    z-index: 10;
}

看看我的 fiddle 元素:http://jsfiddle.net/hr8sL/5925/

我只是想让背景颜色填充页面(当然没有顶部菜单)。

编辑:我尝试使用溢出:自动。它可以工作，但滚动条位于 div 上。我想在整个页面上保留滚动条。

Answer 1

试试这个:你在 #menuBackground {display : relative;} 中有一个错误。

将其更改为 #menuBackground {display : inline-block;}