Page 1 of 1
Problem with CSS Height
Posted: Wed Jul 27, 2011 1:44 pm
by Hustle
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>
Re: Problem with CSS Height
Posted: Wed Jul 27, 2011 1:46 pm
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.
Re: Problem with CSS Height
Posted: Wed Jul 27, 2011 1:50 pm
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.
Re: Problem with CSS Height
Posted: Thu Jul 28, 2011 1:49 pm
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>
Re: Problem with CSS Height
Posted: Thu Jul 28, 2011 4:41 pm
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.
Re: Problem with CSS Height
Posted: Thu Jul 28, 2011 5:16 pm
by jacek
I actually manually set the height of #right to 1000px to test if scrolling worked. Just remove that.
Re: Problem with CSS Height
Posted: Thu Jul 28, 2011 5:21 pm
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
.