我想根据#child_2 的内容呈现 HTML ( https://jsfiddle.net/xhtp70e6/ )
<div id="parent">
<div id="child">
<div id="child_1"></div>
<div id="child_2">
Content
</div>
</div>
<div id="child2"></div>
</div>
html, body { height: 100%; }
#parent { width: 50px; height: 1px; min-height: 100%; }
#child { width: 50px; height: 1px; min-height: 80%; background-color: blue; }
#child_1 { height: 50%; background-color: black; }
#child_2 { min-height: 50%; background-color: pink; }
#child2 { width: 50px; height: 20%; background-color: orange; }
当内容很短时,文档会完全呈现在页面上。 (如上例)
但是当内容很长时,它不会显示整个#child_2 的内容。 ( https://jsfiddle.net/mrdkvvbn/ ) #child2 的内容在 #child_2 的内容上上升而不下降。
<div id="parent">
<div id="child">
<div id="child_1"></div>
<div id="child_2">Content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div id="child2"></div>
</div>
我该如何解决?请帮助我!
最佳答案
我认为你需要在 body 上设置一个 min-height 而不是 height..
html { height: 100%; }
body { min-height: 100%; }
我更新了 fiddle :https://jsfiddle.net/oro2434d/
关于html - 如何在带有百分比的子元素中使用最小高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42628117/