May 20, 201016 yr I've encountered this a lot... I want a white sidebar on the side that's the height of the page, so I've given both that div and the body "height:100%;". However, if I give the sidebar any padding or margin on the top or the bottom, or a border there, the page starts scrolling. Here's the code. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title>Your Title Here</title> <style type="text/css"> body{ background:#AAAAAA; height: 100%; } #side{ position:absolute; left: 0px; top: 0px; width: 230px; height: 100%; padding-top:2px; background: #FFFFFF; } </style> </head> <body> <div id="side"> Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. </div> </body> </HTML> And here's what it looks like: What can I do to make it so it only scrolls when the content overflows?
May 20, 201016 yr Would this work? - Leave the sidebar without any top or bottom margins, padding or borders so that the height: 100%; works without making a scrollbar, then put another div inside with top padding and border and overflow: auto;. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title>Your Title Here</title> <style type="text/css"> * { margin: 0; } /*not needed for the position: absolute sidebar but probably useful for the rest of the page content*/ body{ background:#AAAAAA; height: 100%; } #side{ position:absolute; left: 0px; top: 0px; width: 230px; height: 100%; /*padding-top:2px;*/ background: #FFFFFF; } #inner { padding: 20px; border: 1px solid black; overflow: auto; background: #FFFFFF; } /*background is needed because when you have to scroll, the background of #side will "move up" showing the body gray unless you also add white to the #inner div*/ </style> </head> <body> <div id="side"> <div id="inner"> Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. </div> </div> </body> </HTML> The overflow: auto; only creates a scrollbar when the content is more than the page height.
May 20, 201016 yr Just a guess, but try making the body have 0 margin and padding and border. i.e.: body { margin:0; border:0; padding:0; } maybe...
May 21, 201016 yr Author Did you try my solution which does work (but may not be exactly what you want)? Oh, wow, I didn't even see your post. xP I'll try it. Sounds promising.
May 22, 201016 yr I know your problem is solved but all he did was take the padding out? If you want the padding in and it still to be 100% you just subtract the padding from the height. Or have I completely missed the point of this? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title>Your Title Here</title> <style type="text/css"> body{ background:#AAAAAA; height: 100%; } #side{ position:absolute; left: 0px; top: 0px; width: 230px; height: 98%; padding-top:2%; background: #FFFFFF; } </style> </head> <body> <div id="side"> Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. Testing this thing. </div> </body> </HTML>
May 22, 201016 yr I know your problem is solved but all he did was take the padding out? If you want the padding in and it still to be 100% you just subtract the padding from the height. Or have I completely missed the point of this? I didn't just take out the padding; I deleted the padding from the #side div which has height: 100% so that the height would not be 100% plus padding which causes a scrollbar. I added an #inner div which does have padding and doesn't affect the height: 100% of its parent. You can't subtract padding in px from height: 100%. I've just tested the original frisby code with #side{ position:absolute; left: 0px; top: 0px; width: 230px; height: 98%; padding-top:2%; background: #FFFFFF; } making the height 98% and using padding-top: 2% and that still causes a scrollbar (although I'm not sure why).
Create an account or sign in to comment