pizzaguy Posted September 7, 2009 Share Posted September 7, 2009 What i'm trying to do is have a webpage that can adjust its height based on the viewers browser, so I would obviously use % values in the css dimensions. But I'm also trying to make it so the page doesn't scroll. I have the header and the footer set, the problem is, I cant seem to get the middle (content) part to work. Because the header and footer have set dimensions (px), and the middle needs to be flexible I cant actually set the height property to make "overflow: auto;" work. What i have right now is A div with height 100%, then inside that is an empty div with the height equal to the header's height on top, the content div, and a div on the bottom with the height of the footer. because the outer div has a set height at 100%, I thought that the content div would expand until it plus the other two divs equal 100%, but instead the content just overflows. Does anyone have any ideas of how I can go about fixing this? here is my code: <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /> <link rel="icon" href="favicon.ico" type="image/ico" /> <link rel="stylesheet" type="text/css" href="formatstyle.css" /> <link rel="stylesheet" type="text/css" href="visualstyle.css" /> </head> <body> <div id="container"> <div id="main_cont"> <div id="main"> <div id="top_padding"> </div> <div id="main_content"> Proin metus quam, dapibus vel hendrerit at, commodo at nisl. Aenean auctor ante et mi sagittis egestas? Nullam et risus id leo posuere eleifend. Nulla facilisi. Nunc elementum consectetur ipsum eu porta! Quisque fermentum faucibus nunc vitae ultricies. Praesent neque leo, faucibus eget tincidunt sit amet, blandit vitae nisl. Morbi sodales ultrices tellus id vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pretium feugiat neque, eu facilisis lectus viverra eget. Etiam tempor lorem a velit faucibus feugiat? Suspendisse vulputate lobortis odio a pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris at lorem id nisl dapibus rhoncus in scelerisque tortor. Aenean sed dictum justo. Cras arcu ante, venenatis a adipiscing et, pretium ac lacus. Ut dignissim, massa ut sagittis ultricies; nulla felis fermentum ante, nec dictum ligula nibh ut nulla. Vivamus posuere ultricies tristique? </div> <div id="bottom_padding"> </div> </div> </div> <div id="header"> <div id="header_link"> <a href="index.php"><img id="header_link_img" src="images/blank.png" alt="YesIWouldLikeFriesWithThat.com" /></a> </div> </div> <div id="footer"> </div> </div> </body></html> html,body { margin: 0; padding: 0; height: 100%; width: 100%;}img{ border: 0px solid #000000;}body{ background-color: #000000; font-family: "franklin gothic book",arial,verdana,sans-serif,times; color: #FFFFFF;}#container{ width: 100%; height: 100%; overflow: hidden;}#header{ position: absolute; top: 0px; z-index: 2; width: 100%; height: 79px;}#header_link_img{ height: 79px; width: 508px;}#header_link{ height: 79px; width: 508px; margin: 0 20px;}#footer{ height: 77px; width: 100%; position: absolute; bottom: 0px; z-index: 2;}#main{ height: 100%; margin: 0 0 0 153px;}#main_cont{ height: 100%; overflow: visible;}#bottom_padding{ width: 100%; height: 77px;}#top_padding{ width: 100%; height: 79px;}#main_content{ height: inherit; overflow: auto;} Link to comment Share on other sites More sharing options...
Ingolme Posted September 7, 2009 Share Posted September 7, 2009 The only solution is to give the header, footer and content percentage heights that sum up to 100%. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.