我想根据#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>我该如何解决它? 请帮帮我 !
I wanted to render HTML according to #child_2's contents (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; }when the contents's short, a document is rendered fully to page well. (like above example)
but when the contents's long, it doesn't display whole #child_2's contents. (https://jsfiddle.net/mrdkvvbn/) The #child2's contents goes up on the #child_2's contents without going down it.
<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>How can I solve it? please help me !
最满意答案
我认为你需要在身体上设置最小高度而不是身高。
html { height: 100%; } body { min-height: 100%; }我更新了小提琴: https : //jsfiddle.net/oro2434d/
I think you need to set a min-height on the body instead of height..
html { height: 100%; } body { min-height: 100%; }I updated the fiddle: https://jsfiddle.net/oro2434d/
更多推荐
发布评论