Forum Moderators: not2easy
Here's a problem that has been nagging me for the last two days. I want my vertical scroll bar inside the div to scroll 100% of the screen height in stead of the content height. In other words: I want the div AND the scroll bar to end at the bottom of the screen, auto-adjusting to the size of the window. Also I want it to start from the top-padding down, so 119px from the top of the page. This is my CSS:
-----------
html, body { height:100%; margin:0px; overflow:hidden;}
#main {
background-color:#CC3333;
height:100%;
width:100%;
text-align:center;
margin:auto;
}
#content {
padding-top: 119px;
background-color:#33FFCC;
width: 200px;
height: 100%;
overflow:auto;
}
-----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML:
<div id="main">
<div id="content">
<p>Lorem ipsum dolor sit amet,...</p>
<p>...</p>
<p>enter loads of foo text</p>
</div></div>
Any suggestions? Thanks!
[edited by: SuzyUK at 11:52 am (utc) on April 18, 2007]
[edit reason] Url removed per TOS, code added [/edit]
and no problems - just happened to see your code was already nicely simplified which is what we like around here :) (check the charter link at the top of the forum when you've time, it's a link easily missed!)
about your problem it's the CSS Box Model [w3.org], height and width would've been more aptly named if they were 'content-height' and 'content-width' because the actual height and width of elements is made up of content, padding and borders so your #content div is actually 100%+119px
a solution might be to remove the padding off the content div and then either top-pad the first element in the content div or alternatively add a nested div inside the content div and give it the padding
Suzy
My css now looks like this:
---------
html, body { height:100%; margin:0px; overflow:hidden;}
#main {
background-color:#CC3333;
height:100%;
width:100%;
text-align:center;
margin:auto;
}
#content {
background-color:#33FFCC;
width: 200px;
height: 100%;
overflow:auto;
}
#dummy{
padding-top:119px;
}
---------
and my html:
---------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="style.css" media="all" type="text/css" rel="stylesheet">
</head>
<body>
<div id="main"><div id="content"><div id="dummy"></div>a lot of lorem ipsum...
</div></div>
</body>
</html>
---------
It now works fine at the bottom, but obviously, the scrollbar starts at the top of the screen, and not at the bottom of the padding. So when I put my header image (with height 119px) at the top of the page, the scrollbar disappears underneath it. Solutions?
It now works fine at the bottom, but obviously, the scrollbar starts at the top of the screen, and not at the bottom of the padding. So when I put my header image (with height 119px) at the top of the page, the scrollbar disappears underneath it. Solutions?
<div id="main"><div id="content"><div id="header">Your header goes here</div><div id="dummy"></div>a lot of lorem ipsum...
And remove the 119px of padding on dummy.
[edited by: Fotiman at 2:54 pm (utc) on April 18, 2007]
What you want can't be done with CSS alone, as Suzy and Fotiman are sick of telling me! ;)
You can do it with a tiny bit of JS that should work cross browser:
Firstly, this should be your page code:
html, body { height:100%; margin:0px; overflow:hidden;}#main {
background-color:#CC3333;
height:100%;
width:100%;
text-align:center;
margin:auto;
}#header { height: 119px; }
#content {
/* removed padding-top */
background-color:#33FFCC;
width: 200px;
/* removed height */
/* removed overflow */
}HTML
<body onLoad='doResize();'>
<!-- Fotiman will hate that --><div id="main">
<div id='header'>Title of your page</div>
<div id="content">
<p>Lorem ipsum dolor sit amet,...</p>
<p>...</p>
<p>enter loads of foo text</p>
</div>
</div>
</div></body>
And the little tiny script goes in your <head>.
<script>function doResize() {
var myDiv = document.getElementById( "content");
myDiv.style.overflow = "auto";
myDiv.style.height = ( document.body.clientHeight -myDiv.offsetTop) +"px";
}</script>
That is written specifically to be a child of <body> and nesting will probably break that bit of code. The #main won't affect it as it has no margin/border/padding. It should also adapt to the height of #header.
The reason I removed height and overflow from the CSS for #content is that people without JS should now just have an entire page scroll instead. That is something Fotiman has made me think about.
What you want can't be done with CSS alone, as Suzy and Fotiman are sick of telling me! ;)
Actually, I beg to differ. I think the solution is certainly acheivable with very little CSS. See my last post.
Suzy's results in a full height div with a full height scroll bar and the gap at the top.
Fotiman's results in a wrapper which is 119px taller than the screen, so the scrollbar starts at the top of the screen and is cut off at the bottom. With the gap at the top still.
My solution, which I gather is what was asked for results in a 119px gap at the top, then a scrolling content area starting after the gap and reaching the bottom of the page. With JS disabled the effect is the same but the scrollbar moved to the entire page.
It now depends which method Guido83 wishes to use.
Fotiman's results in a wrapper which is 119px taller than the screen, so the scrollbar starts at the top of the screen and is cut off at the bottom. With the gap at the top still.
No it doesn't. Here's what I suggested. Try this and you'll see it works:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
html, body { height:100%; margin:0px; overflow:hidden;}
#main {
background-color:#CC3333;
height:100%;
width:100%;
text-align:center;
margin:auto;
}
#content {
background-color:#33FFCC;
width: 200px;
height: 100%;
overflow:auto;
margin: 0 auto; /* Added to fix centering */
}
#dummy{
/*padding-top:119px;*/ /* Removed */
}
#header { height: 119px; background-color: #eee;} /* Added instead of absolute positioning */
</style>
</head>
<body>
<div id="main"><div id="content">
<div id="header">Your header goes here</div>
<div id="dummy"></div>
a lot of lorem ipsum...
</div></div>
</body>
</html>
[edited by: SuzyUK at 8:40 am (utc) on April 20, 2007]
[edit reason] board formatting [/edit]
But still the scrollbar is the whole screen height, which I think he was trying to avoid. It comes back to the remaining height issue again. I hope that allow for that in CSS3.
I want my vertical scroll bar inside the div to scroll 100% of the screen height in stead of the content height.
Also I want it to start from the top-padding down
Also from original post.
First of all, thanks for all the effort you have put into this.
Dabrowski's JS-solution works best, and is closest to what I want. It's not quite perfect, because the content div only resizes when the page is opened or refreshed, and not when the window when it is resized by a visitor. I don't know if JS can do that...
Guido, if you add
onResize='doResize();'to your <body> that should resize it when the window size changes.
Glad it was what you wanted.
