0

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 !

left click
  • 894
  • 10
  • 21

1 Answers1

0

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/

Tom Michew
  • 778
  • 1
  • 7
  • 10
  • You have "heigh: 1px;" on #parent and #child - this is erroneous css which should be removed. Other than that, good answer. The   in child_1 and child2 is important. – Craig Mason Mar 06 '17 at 14:39
  • Thanks for your answer! but is it impossible to set the child_1's height to 50%?, I think your answer's child_1's height just display  's height.. – left click Mar 06 '17 at 15:04