5 replies [Last post]
jaschulz
Offline
Regular
Last seen: 10 years 22 weeks ago
Timezone: GMT+1
Joined: 2006-04-12
Posts: 40
Points: 0

Take a look at this in FF, IE and Opera. Scroll-bars everywhere! Why?

thanks,

JAS

Text Site

#mainBox {
margin: 0px;
padding: 0px;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
border: 1px solid #FF0000;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 15 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Why are you mixing so many

Why are you mixing so many properties? You're just asking for trouble.

What are you trying to achieve?

Verschwindende wrote:
  • CSS doesn't make pies

jaschulz
Offline
Regular
Last seen: 10 years 22 weeks ago
Timezone: GMT+1
Joined: 2006-04-12
Posts: 40
Points: 0

I just want to establish a

I just want to establish a div that occupies the whole of the available screen area within the browser window. It seems to me that width: 100% and height: 100% should do that, but in fact I end up with scrollbars in all three browsers because some how they think that 100% is a little more than the available height and width. Why? That's what I don't understand.

JAS

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 28 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Here's your problem:

Here's your problem:

width: 100%; border: 1px solid #FF0000;

Borders and padding add to the width of the element. You have a 1px border on a 100% element, That adds up to more than 100%, so of course the scroll bars appear. Your element is 100% + two pixels wide (one px for each side border).

Mixing percentages and pixels has to be done very carefully.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

jaschulz
Offline
Regular
Last seen: 10 years 22 weeks ago
Timezone: GMT+1
Joined: 2006-04-12
Posts: 40
Points: 0

Sure enough, that was the

Sure enough, that was the problem. Oddly, what got "added" was considerably more than my 1px borders. But that's not worth worrying about now that I understand how the business works.

Thanks,

JAS

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 28 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

jaschulz wrote:Sure enough,

jaschulz wrote:
Sure enough, that was the problem. Oddly, what got "added" was considerably more than my 1px borders.

Not odd, really, because the browser then has to draw the scroll bar which is s good deal more than 2px wide.

[Edit] Hmm ... that's wrong because the scroll bar is on the bottom, of course. Possibly it drew another vertical scrollbar as well though.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.