html - CSS parent and child extend page with content -
now have seen same question around different. 1 floats, other 3 different divs. parent , child. it's simple yet i'm doing wrong. site layout looks like:
here html:
<body> <div id="header"> <?php include("../includes/navbar.php"); ?> <div style="clear: both;"></div> </div> <div id="main"> <div id="main-container"> test<br> </div> </div> <div id="footer"> <?php include("../includes/footer.php"); ?> </div> </body> and css:
html, body, ul, p { margin:0; padding:0; width:100%; height:100%; font-family:arial, helvetica, sans-serif; font-weight:200; } #header { position:fixed; background:#222; color:#999; width:100%; margin:0px; padding:0px; top:0; z-index:1; height:5%; } #main { margin-top:2.4%; background:#f0f0f0; position:relative; padding:0; width:100%; color:#222; min-height:100%; height: auto; overflow:hiden; } #main-container{ background:#fff; word-wrap:break-word; margin-right:15%; margin-left:15%; border-left:3px solid #d5d5d5; border-right:3px solid #d5d5d5; border-bottom-right-radius:50px 50px; border-bottom-left-radius:50px 50px; min-height: 100%; color:#222; } #footer { font: 20px tahoma, helvetica, arial, sans-serif; text-align:center; width:100%; height:10%; color: #222; text-shadow: 0px 2px 5px #555; background:#474747; } now codes above if content runs past bottom of page #main , #content keep going until end of content. problem while #main has height on auto #content stops once reaches end of content. want extend end of page #main when there more content keeps going tell content ends.
it's me explain sorry if can't understand it.
maybe you're looking this:
markup
<div id="header"> <h1>main title of web page</h1></div> <div id="main"> <div id="main-content"> content</div> </div> <div id="footer" style="background-color:#ffa500;clear:both;text-align:center;"> copyright © something</div> css
#main { height: 100%; background: pink; margin: -37px 100px -20px 100px; padding: 37px 0 20px 0; -moz-box-sizing: border-box; box-sizing: border-box; } #main-content { overflow:auto; height:100%; min-height: 100%; } #header { position: relative; z-index:1; height: 37px; background:orange; } #footer { height: 20px; position: relative; z-index:1; } 
Comments
Post a Comment