CSS styles with 100% height

Guest · Oct 23, 2007

Hello,

I am trying to create a CSS style that uses 100% of a web page height.
This works with width - that is if the CSS style is set: width=100%
I also set the background color and the correct rectangle is drawn.

But if I use height=100% and width=100px, the height doesnot
encompass the entire page - maybe only 200px or so.

How do you define a style with 100% height?

THanks,
bruce

My style:
#blueleftwideborder {

background-color: #1D57A0;

position: absolute;

visibility: visible;

width: 120px;

left: 0px;

top: 0px;

height: 100%;

}

Els · Oct 23, 2007

nospam said:
But if I use height=100% and width=100px, the height doesnot
encompass the entire page - maybe only 200px or so.

How do you define a style with 100% height?

100% height is 100% of the parent's set height. Apparently the
parent's set height is only 200px or so.
You can of course add body{height:100%;}, but be aware that this will
likely have unwanted side effects if your page is taller than the
viewport.

Guest · Oct 23, 2007

Thanks for the reply.

Sorry but it still isn't clear to me. I'm a newbie to CSS.

What is the parents set height? Is that defined in CSS or in the web page
HTML?
What is the viewport?

I guess I need to dig into how the browser interacts with CSS to render
itself.
Do you have any good books, pointers or recommendations for that?

Regards,
bruce

Els · Oct 23, 2007

nospam said:
Thanks for the reply.

Please, don't top post. Top posting is writing a reply above the stuff
you reply to. Reading from top to bottom, this is weird.
Rest of reply re-ordered:

What is the parents set height?

The height that was set on the parent element:

Example:
<body>
<div>
<p>hello</p>
</div>
</body>

Body is the parent of div, and div is the parent of p. P is the child
of div, and the grandchild (descendant) of body.

Is that defined in CSS or in the web page HTML?

The height is set through CSS (if you do it right

).
In the above example, setting 100% height for body, div and p, would
make all these elements 100% high. But if the content of p is taller
than the viewport, it will go "outside" this 100%. Try it out to see
what I mean, and then accept different lengths of pages - don't set
100% height. Don't set any height, let it extend as far as is needed
to display your content.

What is the viewport?

The inside of the four sides of your browser.
The area you have available to show your webpages. Its size is defined
by your visitors, and they all use different size windows.

I guess I need to dig into how the browser interacts with CSS to render
itself.

How the browser renders itself? Don't think you need to know - can't
remember I ever even thought about that.

Do you have any good books, pointers or recommendations for that?

Not really - I learned most stuff right here, in alt.html...

Chaddy2222 · Oct 23, 2007

Els said:
Please, don't top post. Top posting is writing a reply above the stuff
you reply to. Reading from top to bottom, this is weird.
Rest of reply re-ordered:

The height that was set on the parent element:

Example:
<body>
<div>
<p>hello</p>
</div>
</body>

Body is the parent of div, and div is the parent of p. P is the child
of div, and the grandchild (descendant) of body.

The height is set through CSS (if you do it right ).
In the above example, setting 100% height for body, div and p, would
make all these elements 100% high. But if the content of p is taller
than the viewport, it will go "outside" this 100%. Try it out to see
what I mean, and then accept different lengths of pages - don't set
100% height. Don't set any height, let it extend as far as is needed
to display your content.

Is there much point in setting the hight to auto? I don't tend to do
that a lot but I do and have done so for some sites I've worked on.

The inside of the four sides of your browser.
The area you have available to show your webpages. Its size is defined
by your visitors, and they all use different size windows.

How the browser renders itself? Don't think you need to know - can't
remember I ever even thought about that.

Not really - I learned most stuff right here, in alt.html...

I have learned a lot of stuff from here as well. I still am.
HTML Dog is a good site: http://www.htmldog.com they have some nice
moddern tutorials and some good articles.
http://www.carlcore.com is a good site for such articles as well.
Oh and I have some rather old ones of my own, http://freewebdesign.awardspace.biz/wdto
they were all written as far back as 2005. Some are from last year.

dorayme · Oct 23, 2007

"nospam said:
Thanks for the reply.

Sorry but it still isn't clear to me.

Els has replied to this. I can add:

When I put the snippet of mark up originally supplied by you into
an html file, the page had a blue margin of 120px going from top
to bottom no matter the size of the browser. So, what did you do
to test your code, perhaps you can supply a url to it? When I put
your snippet into an html file in a straightforward way, I got:

http://netweaver.com.au/test/nospam.html

This gets a blue 120px wide border from top to bottom
irrespective of browser window size in Mac Safari, Camino, iCab,
Opera, Firefox Not too surprisingly, nothing appears in the old
and not much used MacIE. I have not tested in Windows IE

About books and tutes, see the very recent threads in this group
and in comp.infosystems.www.authoring.stylesheets where these are
offered.

Jonathan N. Little · Oct 23, 2007

dorayme said:
Els has replied to this. I can add:

When I put the snippet of mark up originally supplied by you into
an html file, the page had a blue margin of 120px going from top
to bottom no matter the size of the browser. So, what did you do
to test your code, perhaps you can supply a url to it? When I put
your snippet into an html file in a straightforward way, I got:

http://netweaver.com.au/test/nospam.html

This gets a blue 120px wide border from top to bottom
irrespective of browser window size in Mac Safari, Camino, iCab,
Opera, Firefox Not too surprisingly, nothing appears in the old
and not much used MacIE. I have not tested in Windows IE

MSIE 7 = "Thumbs Up!"
MSIE 6.01 = "Thumbs Down!" blue 120px wide but only 15px high (1 line?)
MSIE 5.5 = "Thumbs Up!"
MSIE 5.01 = "Thumbs Up!"
MSIE 4.01 = "Wiggles had palm down" blue 120px wide but does not quite
make it to the bottom. Always about 25px shy!

Don't ya just love IE!

Guest · Oct 24, 2007

Els said:
Please, don't top post. Top posting is writing a reply above the stuff
you reply to. Reading from top to bottom, this is weird.
Rest of reply re-ordered:

The height that was set on the parent element:

Example:
<body>
<div>
<p>hello</p>
</div>
</body>

Body is the parent of div, and div is the parent of p. P is the child
of div, and the grandchild (descendant) of body.

The height is set through CSS (if you do it right ).
In the above example, setting 100% height for body, div and p, would
make all these elements 100% high. But if the content of p is taller
than the viewport, it will go "outside" this 100%. Try it out to see
what I mean, and then accept different lengths of pages - don't set
100% height. Don't set any height, let it extend as far as is needed
to display your content.

The inside of the four sides of your browser.
The area you have available to show your webpages. Its size is defined
by your visitors, and they all use different size windows.

How the browser renders itself? Don't think you need to know - can't
remember I ever even thought about that.

Not really - I learned most stuff right here, in alt.html...

Thanks for the explaination.

It worked as expected ( 100% height) after putting the same attribute
in the body tag -
body {height: 100%}

Later,
bruce

Els · Oct 24, 2007

Chaddy2222 said:
Is there much point in setting the hight to auto? I don't tend to do
that a lot but I do and have done so for some sites I've worked on.

As long as you don't need to override a previously set height, there
is no point in setting it to auto. That's the default.

Chaddy2222 · Oct 24, 2007

As long as you don't need to override a previously set height, there
is no point in setting it to auto. That's the default.

Well yes, that's what I was thinking.

dorayme · Oct 24, 2007

"Jonathan N. Little said:
MSIE 7 = "Thumbs Up!"
MSIE 6.01 = "Thumbs Down!" blue 120px wide but only 15px high (1 line?)
MSIE 5.5 = "Thumbs Up!"
MSIE 5.01 = "Thumbs Up!"
MSIE 4.01 = "Wiggles had palm down" blue 120px wide but does not quite
make it to the bottom. Always about 25px shy!

Don't ya just love IE!

I notice now that when I add to my cited url, body {width:
100%;}, I get the phenomena of your "MSIE 4.01 = "Wiggles had
palm down" blue 120px wide but does not quite make it to the
bottom. Always about 25px shy!" At least it *mostly* then appears
in MacIE!

Jonathan N. Little · Oct 24, 2007

dorayme said:
I notice now that when I add to my cited url, body {width:
100%;}, I get the phenomena of your "MSIE 4.01 = "Wiggles had

Of course *after* I post is see this should be *hand* ------^^^

palm down" blue 120px wide but does not quite make it to the
bottom. Always about 25px shy!" At least it *mostly* then appears
in MacIE!

What I found wild is when it failed in IE6 you would *expect* it would
fail in all other previous versions... Makes web design with IE fun so
if you ever considered IE conditional comments your salvation the
nightmare will hit you that you may have to fork for every incarnation
of this turkey!

Help with Visual Lightbox: Scripts	2	May 3, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Help with my responsive home page	2	Dec 14, 2022
Flip-Cards with Local Images	1	Mar 27, 2023
Stuck with html and css	25	Dec 14, 2022
Trouble with css	4	Mar 20, 2020
Image not changing between "mute" & "un-mute" images.	5	Jun 2, 2023
Need help with code on website (noob)	2	Jul 18, 2022

CSS styles with 100% height

Guest

Els

Guest

Els

Chaddy2222

dorayme

Jonathan N. Little

Guest

Els

Chaddy2222

dorayme

Jonathan N. Little

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads