html - how to make child div occupy the parent div height -
i want know how possible child div occupy parent div height.
the below code html:
<div class="container"> <div class="header width100p"> <h2> header </h2> </div> <div class="content width100p"> <div class="width29p npv"> <div class="width100p inner"> <p> navigation </p> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> </div> </div> <div class="rtb"> <div class="width100p ql"> <p> div 1 </p> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> </div> <div class="width100p mtbs"> <p> div 2 </p> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> </div> <div class="floatl width100p widdiv"> <div class="floatl width100p"> <div class="floatl width40p incont"> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> </div> <div class="floatl width40p incont"> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> </div> </div> <div class="floatl width100p"> <div class="floatl width40p incont"> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> </div> <div class="floatl width40p incont"> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s </p> </div> </div> </div> <div class="clear"></div> </div> </div> <div class="footer width100p"> <h2> footer </h2> </div> </div> the respective styles are:
<style> *,html{ margin: 0; padding: 0; } html{ height: 100%; } .container{ width:960px; margin:20px auto; } .header h2,.footer h2{ text-align: center; } .floatl{ float: left; } .floatr{ float: right; } .clear{ clear:both; } .width100p{ width: 100%; } .width29p{ width: 29%; } .width70p{ width: 70.8%; } .header,.footer,.content{ border:1px solid #000; } .npv{ border-right: 1px solid #000; } .ql,.mtbs{ border-bottom: 1px solid #000; } .content{ display: table; } .npv, .rtb{ display: table-cell; } .width40p{ width: 40%; } .incont{ margin: 4%; background: #ccc; border:1px solid red; } </style> i want know how (.inner) child div can occupy height of parent div(.npv). have tried applying height:100% !important both .inner , .npv still not resolve problem of child div occupying parent div height. problem of occupying
markup
<html> <body> <div class="outer"> <div class="inner"> </div> </body> </html> css
html, body { height: 100%; width: 100%; } .outer { height: 100%; // or set height , width in pixels width: 100%; } .outer .inner { height: 100%; width: 100%; } for percentage heights work,
you need set heights of each , every parent in heirarchy.
including html, , body tags.
Comments
Post a Comment