Problem with CSS Height

Anything questions related to styling should go in here.
Post Reply
User avatar
Hustle
Posts: 24
Joined: Wed Jul 27, 2011 1:30 pm
Location: United Kingdom

Problem with CSS Height

Post by Hustle »

Hi :D ,

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>
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Problem with CSS Height

Post by jacek »

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.
Image
User avatar
Hustle
Posts: 24
Joined: Wed Jul 27, 2011 1:30 pm
Location: United Kingdom

Re: Problem with CSS Height

Post by Hustle »

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.
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Problem with CSS Height

Post by jacek »

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>
Image
User avatar
Hustle
Posts: 24
Joined: Wed Jul 27, 2011 1:30 pm
Location: United Kingdom

Re: Problem with CSS Height

Post by Hustle »

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.
Image
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Problem with CSS Height

Post by jacek »

I actually manually set the height of #right to 1000px to test if scrolling worked. Just remove that.
Image
User avatar
Hustle
Posts: 24
Joined: Wed Jul 27, 2011 1:30 pm
Location: United Kingdom

Re: Problem with CSS Height

Post by Hustle »

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 :D.
Post Reply