html - 是否可以使用百分比在另一个 div 内的浮动 div 上设置最小高度？

Question

她是我的CSS：

html {
/* force document to be 200% of window size */
min-height: 200%;
}
body {
height:auto; 
margin:0 auto;
}
div#wrapper {
/* so that child divs with floats stay contained */
overflow:hidden; 
margin:auto;
min-width:200%;
min-height:200%; /* doesn't work */
background-color:#000;
border:1px solid red;
}
div#content1 {
float:left;
min-width:45%;
min-height:45%; /* doesn't work */
background-color:#555;
border:1px solid green;
}
div#content2 {
float:right;
min-width:45%;
min-height:45%; /* doesn't work */
background-color:#777;
border:1px solid blue;
}

和html：

<div id="wrapper">
<div id="content1"></div>
<div id="content2"></div>
</div>

我希望 #content1 和 #conent2 始终占据窗口的 45%，无论内容如何。至少在 Firefox 中，最小宽度有效，但最小高度无效。在这种情况下是否可以使用百分比设置最小高度？

Answer 1

height仅当parent容器设置为固定高度时，才能以百分比形式引用该属性。在这种情况下，html尽管height:auto您有明确的height:200%. 因此，将wrapper分隔线设置为百分比高度将不起作用，随后的百分比min-height子元素也将无效。