height=100% giving unecessary scroll bars. - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

height=100% giving unecessary scroll bars.

How to avoid it?

NooK

2:45 pm on Dec 18, 2007 (gmt 0)

10+ Year Member

I have a webpage where I want to be able to color the background so that the whole background is colored even if not the whole page is filled.

I have read that to do this you need to make all tags starting with the main one <HTML> to have height 100% because otherwise it won't work.

Basically


HTML
{
 HEIGHT: 100%
}BODY
{
 PADDING-RIGHT: 0px;
 PADDING-LEFT: 0px;
 PADDING-BOTTOM: 0px;
 PADDING-TOP: 0px;
 BACKGROUND-POSITION: left top;
 MARGIN: 0px 0px 10px;
 FONT: 11px Verdana, sans-serif;
 HEIGHT: 100%;
 BACKGROUND-REPEAT: no-repeat
}

And so forth. The problem is that in some cases, for example a table right under the body tag, making height=100% will create unnecessary scroll bars and the user will have a scroll bar to scroll down to nothing.

I noticed that for example just setting height=97% on the body tag is enough to remove the scroll bar on the main page while a table with height=100% has to be reduced to much lower number (About 75%) to remove the scroll bar.

Can anybody help me up with what might be causing the scroll bars? I thought it might be the long background but after making it smaller so that it fits entirely on the screen it still shows the bars.

ChrisBolton

6:04 am on Dec 22, 2007 (gmt 0)

10+ Year Member

If the only reason you are doing this is to colour the background then why not just add a background-colour to the css in the body?

Chris.

NooK

9:02 am on Jan 7, 2008 (gmt 0)

10+ Year Member

I am adding a background color in the css, but the color will not fill the entire page (Even if I only have stuff that fills half the page) unless I set the height to 100% as I have found as a suggestion here which seemed to work but in some cases setting to a 100% seem to give unecessary scroll bars (Making the background color longer than supposed)

ChrisBolton

7:58 pm on Jan 7, 2008 (gmt 0)

10+ Year Member

Firstly Nook, If you add a background colour to your body CSS, it will fill the whole screen I assure you. The 100% height thing is absurd, I can't imagine where you got that from. I think you are maybe trying to add a background image and a colour which can have different results in different browsers if you don't do it right. You can also trim down your code substantially.

BODY
{
PADDING: 0;
BACKGROUND: #666666 url(images/background.jpg) no-repeat top left;
MARGIN: 0 0 10px 0;
FONT: 11px Verdana, sans-serif;
}

Regards.
Chris.

ChrisBolton

8:01 pm on Jan 7, 2008 (gmt 0)

10+ Year Member

If on the other hand, you are not planning to have a background image as well as a colour, remove the position altogether.

BODY
{
PADDING: 0;
BACKGROUND: #666666;
MARGIN: 0 0 10px 0;
FONT: 11px Verdana, sans-serif;
}

Chris.

NooK

9:30 am on Jan 10, 2008 (gmt 0)

10+ Year Member

Thanks but I am in fact no trying to make all pages coloured. The idea is to have a div that will contain a table and the div background is what I want to set but the div spans horizontally to only part of the page (As the right side of it contains a menu set by another table).

Imagine a page divided by 2 frames where the left frame is a menu and the right frame is data.

On the right side I have the div which I am trying to set the color but I want the color to span vertically to cover the entire visible space of the page (So if users have different resolutions on their screen the right "frame" will always be filled with a background color) but the problem is that as soon as I tell that the div that sets the color to have a height of 100% it grows over the page size and adds a scroll bar (Even though the menu to the right is much smaller than the screen height).

Hope that makes some sense. Still beating myself around it to try and get it to work.

ChrisBolton

11:40 am on Jan 10, 2008 (gmt 0)

10+ Year Member

Ok, a different problem altogether but easily solved if your right side div is a fixed width.

Open you favourite image editor and make a new document the width of your right div (for the example below, 600px) and 5 pixels in height. Make it a solid colour, the colour you want your background to be.

Then put the 2 divs into a containing div.

The CSS.

html, body { height: 100%; }
#container { height: 100%; padding: 0px; width: 900px; background: url(images/background.gif) repeat-y top right; }
.divLeft { float: left; width: 300px; }
.div right { float: right; width: 595px; }

<div id="wrapper">
<div class="divLeft"></div>
<div class="divRight"></div>
</div>

This works well in all browsers.

Regards.

NooK

10:06 am on Jan 14, 2008 (gmt 0)

10+ Year Member

Thanks, feels a pitty to have to resort to such a method when the proper solution would be to just set a background color but I guess CSS and browsers aren't all perfect.