CSS styles with 100% height
CSS styles with 100% height
am 23.10.2007 14:15:20 von Tullamore
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%;
}
Re: CSS styles with 100% height
am 23.10.2007 15:12:23 von Els
nospam wrote:
> 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.
--
Els http://locusmeus.com/
Re: CSS styles with 100% height
am 23.10.2007 16:14:06 von Tullamore
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" wrote in message
news:1xeuh2c28qdtg.1dn375om2tv05$.dlg@40tude.net...
> nospam wrote:
>
>> 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.
>
> --
> Els http://locusmeus.com/
Re: CSS styles with 100% height
am 23.10.2007 16:53:24 von Els
nospam wrote:
> 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:
> "Els" wrote in message
> news:1xeuh2c28qdtg.1dn375om2tv05$.dlg@40tude.net...
>> nospam wrote:
>>
>>> 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.
>
> What is the parents set height?
The height that was set on the parent element:
Example:
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...
--
Els http://locusmeus.com/
Re: CSS styles with 100% height
am 23.10.2007 19:45:47 von Chaddy2222
Els wrote:
> nospam wrote:
>
> > 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:
>
> > "Els" wrote in message
> > news:1xeuh2c28qdtg.1dn375om2tv05$.dlg@40tude.net...
> >> nospam wrote:
> >>
> >>> 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.
> >
> > What is the parents set height?
>
> The height that was set on the parent element:
>
> Example:
>
>
>
>
> 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.
>
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.
> > 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...
>
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.
--
Regards Chad. http://freewebdesign.awardspace.biz
Re: CSS styles with 100% height
am 23.10.2007 22:05:14 von dorayme
In article ,
"nospam" wrote:
> "Els" wrote in message
> news:1xeuh2c28qdtg.1dn375om2tv05$.dlg@40tude.net...
> > nospam wrote:
> >
> >> 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.
> 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.
--
dorayme
Re: CSS styles with 100% height
am 23.10.2007 22:29:04 von lws4art
dorayme wrote:
> In article ,
> "nospam" wrote:
>
>> "Els" wrote in message
>> news:1xeuh2c28qdtg.1dn375om2tv05$.dlg@40tude.net...
>>> nospam wrote:
>>>
>>>> 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.
>
>
>> 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
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!
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Re: CSS styles with 100% height
am 24.10.2007 02:29:18 von Tullamore
"Els" wrote in message
news:dkz0ccu7scn8.7iohhxiflc6w$.dlg@40tude.net...
> nospam wrote:
>
>> 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:
>
>> "Els" wrote in message
>> news:1xeuh2c28qdtg.1dn375om2tv05$.dlg@40tude.net...
>>> nospam wrote:
>>>
>>>> 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.
>>
>> What is the parents set height?
>
> The height that was set on the parent element:
>
> Example:
>
>
>
>
> 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...
>
> --
> Els http://locusmeus.com/
Thanks for the explaination.
It worked as expected ( 100% height) after putting the same attribute
in the body tag -
body {height: 100%}
Later,
bruce
Re: CSS styles with 100% height
am 24.10.2007 11:18:26 von Els
Chaddy2222 wrote:
> 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.
--
Els http://locusmeus.com/
Re: CSS styles with 100% height
am 24.10.2007 12:02:04 von Chaddy2222
On Oct 24, 7:18 pm, Els wrote:
> Chaddy2222 wrote:
> > 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.
>
Well yes, that's what I was thinking.
--
Regards Chad. http://freewebdesign.awardspace.biz
Re: CSS styles with 100% height
am 24.10.2007 18:20:25 von dorayme
In article <1fd82$471e598a$40cba7ba$16356@NAXS.COM>,
"Jonathan N. Little" wrote:
> dorayme wrote:
> > In article ,
> > "nospam" wrote:
> >
> >> "Els"
> > 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!
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!
--
dorayme
Re: CSS styles with 100% height
am 24.10.2007 19:34:55 von lws4art
dorayme wrote:
> In article <1fd82$471e598a$40cba7ba$16356@NAXS.COM>,
> "Jonathan N. Little" wrote:
>
>> dorayme wrote:
>>> 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!
>
> 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!
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com