我有一个带有堆叠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/
$(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的背景颜色。
答案 0 :(得分:0)
您需要将background: green;
提交给.region
。然后它会扩展背景颜色。
.region{
height:200px;
border:1px solid red;
background: green;
}
<强> Working Fiddle
答案 1 :(得分:0)
为什么要设置height: 1px
和min-height: 100%
?
试试这个:
.one {
background: green;
}