Question

我有一个带有堆叠div的页面，div以块方式动态添加。它必须覆盖100％的视口高度，并在内容超出视口时显示滚动条。我面临的问题是外部div必须有背景颜色。当给这个div的最小高度为100％并且应用高度：1px修复使得子div继承100％高度时，我得到了child inside parent with min-height 100% not inheriting height中所需的效果但是，背景颜色不会延伸到全高。嵌套的div和动态添加div的机制在这里模仿： https://jsfiddle.net/b859L1gs/

＆＃13;

$(document).ready(function() {
   $("#clickme").click(function() {
       $(".two").append(" < div class = 'region' > < /div>") 
   }); 
})

＆＃13;

html {
    height: 100%;
}
body {
    height: 100%;
}
.one {
    min-height: 100%;
    height: 1px;
    background: green;
}
.two {
    height: 100%;
}
.region {
    height: 200px;
    border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <body>
        <div class="one">
            <div class="two">
                <div class="three">
                    ...
                    <div class="region">
                    </div>
                    <button id="clickme">
                        here
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>

＆＃13;

单击按钮展开div并查看高度展开但不是背景颜色。请注意，根据应用程序的约束只是在第一个最外面的div而不是body的背景颜色。

Answer 1

您需要将background: green;提交给.region。然后它会扩展背景颜色。

.region{
  height:200px;
  border:1px solid red;
   background: green;
}

<强> Working Fiddle

Answer 2

为什么要设置height: 1px和min-height: 100%？

试试这个：

.one {
    background: green;
}

最小高度的div：100％不会扩展背景颜色

2 个答案: