Jump to content

Overflow, Without Setting Height?


Recommended Posts

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...