border on 100% height body creates scroll

I'm trying to figure out why the following creates a vertical scroll
bar.

Browser is IE 7 - using XHTML 1.0. I expand html and body to height
of 100% and then I want to put a border around the whole viewport.
What happens is that I get a vertical scrollbar (which I can hide, of
course).

Essentially what I'd like to know why adding a border increases the
block but not the 100% sized viewport (and thus the scrollbar).

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Page</title>
<style type="text/css">

html
{
height:100%;
margin: 0px;
padding: 0px;
border: 0px;
}

.bodyContent
{
height:100%;
margin: 0px;
padding: 0px;
border-right:Red 1px solid;
border-bottom:Red 1px solid;
}

</style>

</head>
<body class="bodyContent">
<table style="border-collapse:collapse;width:100%;height:100%"
cellpadding="0" cellspacing="0">
<tr>
<td>R</td>
<td>R</td>
<td>R</td>
<td>R</td>
</tr>
<tr>
<td>R</td>
<td>R</td>
<td>R</td>
<td>R</td>
</tr>
</table>
</body>
</html>

In article
<cd5cad54-e7e4-4e36-af66-04d5069d1327@p10g2000prf.googlegroups.com>,
msoliver <michaelsoliver@gmail.comwrote:

Quote:

I'm trying to figure out why the following creates a vertical scroll
bar.
>
Browser is IE 7 - using XHTML 1.0. I expand html and body to height
of 100% and then I want to put a border around the whole viewport.
What happens is that I get a vertical scrollbar (which I can hide, of
course).
>
Essentially what I'd like to know why adding a border increases the
block but not the 100% sized viewport (and thus the scrollbar).

You can't do much via CSS to the viewport. It is just a window through
which to see webpages, If they don't fit, the browser gives you scroll
bars to bring stuff into view. the size of the viewport is really just
under your control, you can make it as big as your screen or as small as
it will go.

When you add borders to an element, the content part of the element does
not shrink to accommodate the borders. The borders go on in addition.
And the browser insists they might be something you want to see and so
it brings up scrolling. The scrollbars get counted

<http://dorayme.890m.com/alt/oliver.html>

If you have already set the height of the html element to be 100% of the
viewport and then body also to 100% of the html, and further if you set
a div inside body to be 100% of body, then where are borders to go? They
go out of view.

You might think, so who cares about borders. Well, imagine the Russians
are on to you and you know that the thickness and colour of the borders
are a possibly informative sign to their agents about whether the
Kremlin requires your elimination or merely your cellar to store some
vodka without paying duty on it. If you know the signs, you will want to
see those borders and the browser is your friend here. It gives you the
means. No browser I know of has ever been Russian friendly. The Russians
did try to make a browser that had no scrollbars but it was an absolute
disaster, like a car they made.

If you don't believe all this stuff, that is quite ok. Just join some
serious characters in the Reading Room and peruse:

<http://www.w3.org/TR/CSS21/box.html>

Perhaps you might also take a look at:

<http://tinyurl.com/w322t>

--
dorayme

On 2008-09-23, dorayme <doraymeRidThis@optusnet.com.auwrote:
[...]

Quote:

No browser I know of has ever been Russian friendly. The Russians did
try to make a browser that had no scrollbars but it was an absolute
disaster, like a car they made.

Setting overflow: hidden on the root element ought to get rid of the
scrollbars on the viewport.

In article <slrngdhfvu.551.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggswrote:

Quote:

On 2008-09-23, dorayme <doraymeRidThis@optusnet.com.auwrote:
[...]

Quote:

No browser I know of has ever been Russian friendly. The Russians did
try to make a browser that had no scrollbars but it was an absolute
disaster, like a car they made.

>
Setting overflow: hidden on the root element ought to get rid of the
scrollbars on the viewport.

Yes. But I think the OP mentioned he did not want to do this (in an
aside where he said he *could* hide the bars).

He wanted to know what was really going on rather than how to cover up
the effects he noticed. I gave him a little bit but was starting to get
on to to a subject that can get a bit creepy, namely "viewport talk" and
I had to stop because I don't know the OP and how he can cope with scary
stuff. I don't go around talking about Ultimate Opaque Objects and
Rectangles to just anyone. Please understand this. I am very
responsible.

--
dorayme

Thanks for your responses, but let me put the question more directly:

Using CSS, is there a way to make the content 100% height and have a
surrounding border without causing the overall content to increase in
size (which causes the scroll). Again, I'm talking about IE 7 here,
strict HTML 4.0/CSS 2.0 mode. The 100% appears to apply only to the
container and is ignored when borders are added. If I avoid putting
the border on the <bodyand instead put it in a child DIV or TABLE, I
get the same problem.

Thanks!

- Mike

On 2008-09-23, msoliver <michaelsoliver@gmail.comwrote:

Quote:

Thanks for your responses, but let me put the question more directly:
>
Using CSS, is there a way to make the content 100% height and have a
surrounding border without causing the overall content to increase in
size (which causes the scroll). Again, I'm talking about IE 7 here,
strict HTML 4.0/CSS 2.0 mode. The 100% appears to apply only to the
container and is ignored when borders are added. If I avoid putting
the border on the <bodyand instead put it in a child DIV or TABLE, I
get the same problem.

You could try:

body
{
position: absolute;
border: 5px solid black;
margin: 0; padding: 0;
top: 0; left: 0; bottom: 0; right: 0;
}

Don't know if it works in IE. It looks bad if your content is bigger
than the viewport, but that's just a reason not to try and put a border
across the bottom-- you never really know where the bottom is.

In article <slrngdilr0.7pf.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggswrote:

Quote:

On 2008-09-23, msoliver <michaelsoliver@gmail.comwrote:

Quote:

Thanks for your responses, but let me put the question more directly:

Using CSS, is there a way to make the content 100% height and have a
surrounding border without causing the overall content to increase in
size (which causes the scroll). Again, I'm talking about IE 7 here,
strict HTML 4.0/CSS 2.0 mode. The 100% appears to apply only to the
container and is ignored when borders are added. If I avoid putting
the border on the <bodyand instead put it in a child DIV or TABLE, I
get the same problem.

>
You could try:
>
body
{
position: absolute;
border: 5px solid black;
margin: 0; padding: 0;
top: 0; left: 0; bottom: 0; right: 0;
}
>
Don't know if it works in IE. It looks bad if your content is bigger
than the viewport, but that's just a reason not to try and put a border
across the bottom-- you never really know where the bottom is.

I was amused to see Mac IE5's response:

<http://dorayme.890m.com/alt/justPics/macie5response.png>

--
dorayme

border on 100% height body creates scroll

re: border on 100% height body creates scroll

re: border on 100% height body creates scroll

re: border on 100% height body creates scroll

re: border on 100% height body creates scroll

re: border on 100% height body creates scroll

re: border on 100% height body creates scroll

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about