Problem with CSS Height

Hustle · Post by **Hustle** » Wed Jul 27, 2011 1:44 pm

Hi

,

I've been working on this for a couple days without sucess, what it is, is I'm trying to get my menu and content box to fill the remainder of the browser screen and not overspill when it doesn't need to, i.e. if i only have a couple lines of text, the browser shouldn't need to scroll down the screen when theres no content at the bottom, problem is I've set the height to be 100%, when that happens the menu disappears, if i change it to say 500px the menu appears,

If anyone could fix my problem i'd be most greatful,

Thank You,
Alex Jake.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body{ 
background-color:#dc8;
font-size:16px; 
margin:0; 
padding:0; 
}

#header{ 
background-color:#333;
height:150px;
}

#right{ 
float:right;
width:200px;
background-color:#dc8; 
min-height:100%; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:100%; /* for IE5 and IE6 */
}

#center { 
margin-right:200px;
background-color:#eec; 
min-height:100%; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:100%; /* for IE5 and IE6 */
}

</style>
</head>
<body>
<div id="header">
	</div>
<div id="right">
	</div>
<div id="center">
	</div>
</body>
</html>

Post by **jacek** » Wed Jul 27, 2011 1:46 pm

if the div contains things that are floated (float:left) then you need to apply overflow:auto for height:auto to work so that might be why it disappeared.

Hustle · Post by **Hustle** » Wed Jul 27, 2011 1:50 pm

jacek wrote:if the div contains things that are floated (float:left) then you need to apply overflow:auto for height:auto to work so that might be why it disappeared.

Would it be possible if you could amend my code please,

Thank You.

Post by **jacek** » Thu Jul 28, 2011 1:49 pm

Ah, I misunderstood a bit, the problem is that height:100% means 100% of the body.

I think to get the effect you want you will have to resort to a bit of a dodgy method or creating the paged design with position: fixed elements and that putting the content on top of it. An example would be the best way to explain this really so here is somethign that works in Firefox 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
	<title>Page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
		body {
			font-size: 16px; 
			margin: 0; 
			padding: 0; 
		}
		
		#header {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 150px;
			background-color: #333;
		}
		
		#right_bg {
			position: fixed;
			top: 0px;
			right: 0px;
			width: 200px;
			height: 100%;
			background-color: #dc8;
		}
		
		#center_bg {
			position: fixed;
			top: 0px;
			left: 0px;
			right: 200px;
			height: 100%;
			background-color: #eec; 
		}
		
		#center {
			position: absolute;
			top: 150px;
			left: 0px;
			right: 200px;
		}
		
		#right {
			position: absolute;
			top: 150px;
			right: 0px;
			width: 200px;
			
			height: 1000px;
		}
	</style>
	</head>
	<body>
		<div id="right_bg"></div>
		<div id="center_bg"></div>
		<div id="header">
			header stuff goes here.
		</div>
		<div id="center">
			cenre stuff goes here.
		</div>
		<div id="right">
			right stuff goes here.
		</div>
	</body>
</html>

Hustle · Post by **Hustle** » Thu Jul 28, 2011 4:41 pm

Thank you for your reply, what I am hoping for is as there is no content at the bottom of the page, the scroll bar shouldn't appear, if possible could you amend the code please,

Thank You Very Much

As appears in the screenshot there is no content but a scroll bar still appears.

Post by **jacek** » Thu Jul 28, 2011 5:16 pm

I actually manually set the height of #right to 1000px to test if scrolling worked. Just remove that.

Hustle · Post by **Hustle** » Thu Jul 28, 2011 5:21 pm

jacek wrote:I actually manually set the height of #right to 1000px to test if scrolling worked. Just remove that.

Ah!, Thank You Very Much

.

BetterPHP

Problem with CSS Height

Problem with CSS Height

Re: Problem with CSS Height

Re: Problem with CSS Height

Re: Problem with CSS Height

Re: Problem with CSS Height

Re: Problem with CSS Height

Re: Problem with CSS Height