PDA

View Full Version : Why is this stretching past 100%?

kraftomatic
12-22-2003, 04:01 PM
Hey All,

I have the following code with a height set to 100%. I want this to stretch to the bottom of the screen. However, it's stretching past that, where I have to scroll. Any ideas?

Thanks,


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>consumer credit</title>

<style type="text/css">

html, body {
text-align:center;
margin:0px;
padding:0px;
height:100%;
}

#frame {
width:750px;
height:100%;
margin:0px;
padding:0px;
text-align:left;
border: thin dashed #cccccc;
}

#topHeader {
width:100%;
height:50px;
border: thin dashed red;
}

#imageHeader {
width:100%;
height:75px;
border: thin dashed blue;
}

#leftContent {
width:500px;
height:100%;
border: thin dashed green;
}

</style>

</head>
<body>

<div id="frame">
<div id="topHeader">header</div>
<div id="imageHeader">image</div>
<div id="leftContent">image</div>

</div>

</body>
</html>
ReadMe.txt
12-22-2003, 04:14 PM
height percentages are computed with respect to the parent, not set to fill the remaining width, to do that you have to use the table model, thats what it's for really. (i know we shouldn't but if people continue to attempt table layouts with CSS, they'll need to use a tables :rolleyes:)

This could also be done by using abs pos and setting the top left right and bottom properties of the elements also setting width and height to auto where applicable.
me'
12-22-2003, 04:49 PM
Remember the box model: the height and width are exclusive of margins, padding and borders. You've got a border set in addition to the 100% height. Try this:border: 1px solid #ccc;
border-width: 0 1pxto not put borders on the top and bottom.
kraftomatic
12-22-2003, 05:04 PM
That worked. Thanks for the tip .. However, when I now have the following code, the inner box doesn't strech to 100% without the page having to scroll. I don't think the border is an issue here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>consumer credit</title>

<style type="text/css">

html, body {
text-align:center;
margin:0px;
padding:0px;
height:100%;
}

#frame {
width:750px;
height:100%;
margin:0px;
padding:0px;
text-align:left;
border: 1px solid #ccc;
border-width: 0 1px;
}

#topHeader {
width: 100%;
height: 50px;
padding: 2px;
/*border: thin dashed red;*/
}

#imageHeader {
width:100%;
height:75px;
padding: 2px;
/*border: thin dashed blue;*/
}

#leftContent {
width:550px;
height:100%;
border: thin dashed green;
float:left;
padding: 2px;
margin: 2px 2px 2px 2px;
}

#rightContent {
width: 173px;
margin: 2px 2px 2px 0px;
height: 150px;
border: thin dashed orange;
padding: 2px;
}

</style>

</head>
<body>

<div id="frame">
<div id="topHeader">header</div>
<div id="imageHeader">image</div>
<div id="leftContent">image</div>
<div id="rightContent">image</div>
<div id="rightContent">image</div>
</div>

</body>
</html>
me'
12-22-2003, 05:35 PM
Originally posted by kraftomatic
I don't think the border is an issue here. No, it's margin and padding. You've got 2px of margin and padding set top and bottom, that makes 8px in total that'll be over the 100%. This is where the box model seems stupid and counter-intuitive, which is a real shame. There's no real way to do this. It would be useful if CSS allowed you to combine units, for example height: 100% - 8px;. But no.
kraftomatic
12-22-2003, 05:39 PM
Ok .. so I'm pretty much stuck with the box not extending all the way down.

That's not a huge issue, but in the land of tables, that was feasible.

Thanks ..
me'
12-22-2003, 05:43 PM
My advice: get rid of the #frame div. Set height: 100% on body and html, width padding on the body to emulate the margin from the leftContent div. Then, set margins on the content of the leftContent, rather than padding on leftContent. Like this:body, html { height: 100% }
body { padding: 2px; }
div#leftContent { height: 100% }
div#leftContent * { margin: 2px }
kraftomatic
12-22-2003, 06:14 PM
So something like this:

<html>
<head>
<title>consumer credit</title>

<style type="text/css">

html, body {
text-align:center;
height:100%;
margin:0px;
padding:2px;
}

#leftContent {
width:750px;
height:100%;
border:thin dashed green;
margin:2px;
}

#innerContent {
width: 500px;
height: 100%;
margin: 2px 2px 2px 0px;
border: thin dashed orange;
padding: 2px;
}

</style>

</head>
<body>

<div id="leftContent">
<div id="innerContent">content</div>
</div>

</body>
</html>


The content scrolls, but that can be fixed with the specified border settings that you mentioned above. This will at least let me break up the main page into 2 sides (left and right), while having the left side stretch 100%, right?

Thanks.
me'
12-22-2003, 06:20 PM
Should do, yeah.
kraftomatic
12-22-2003, 08:06 PM
Hmm .. now is doesn't work. Once I add the top headers, everything is back to how it was. Any ideas?

<html>
<head>
<title>consumer credit</title>

<style type="text/css">

html, body {
text-align:center;
height:100%;
margin:0px;
padding:2px;
}

#framework {
width:750px;
height:100%;
text-align:left;
margin:2px;
border: 1px solid #ccc;
border-width: 0 1px
}

#mainContent {
width:550px;
height:100%;
text-align:center;
float:left;
margin:0px;
border:thin dashed orange;
padding:2px;
}

#rightContent {
width:195px;
height:150px;
text-align:center;
margin:0px;
border:thin dashed green;
padding:2px;
}

#topHeader {
width:100%;
height:50px;
text-align:center;
margin:0px;
padding:2px;
border:thin dashed red;
}

#imageHeader {
width:100%;
height:75px;
text-align:center;
margin:0px;
padding:2px;
border:thin dashed blue;
}

</style>

</head>
<body>

<div id="framework">
<div id="topHeader">nav</div>
<div id="imageHeader">image</div>
<div id="mainContent">content</div>
<div id="rightContent">right</div>
</div>

</body>
</html>