Prev: Alternative to DIV in A (IE)
Next: Text line forcing min width of box
From: Jeff Thies on 14 Apr 2010 19:17
dorayme wrote:
> In article <hq51so$kvk$1(a)newsreader2.utanet.at>,
> Gregor Kofler <usenet(a)gregorkofler.com> wrote:
>
>> I have several nested DIVs. The body element gets assigned a height of
>> 100%, the nested divs get a min-height of 100%.
>>
>> The first nested div expands to the complete 100% height, however the
>> second div nested within this one won't.
>>
>> Browsers are of the standards compliant type, doctype is html 4 strict.
>>
>> A simple example:
>>
>> http://ledesign.at/
>>
>> <body> <-- height: 100%
>> <div id="deco_canvas"> <-- min-height: 100% -> ok
>> <div id="page"> <-- min-height: 100% -> only expands to the height
>> of contained elements
>>
>> What do I need to get the page-div to full height, too?
>>
>
> I note you have solved prob to your satisfaction. But that has
> never stopped me talking anyway.
>
> Presumably you know about trouble that happens with your stated
> url re the header and even text breaking out (to the right) of
> the nice rectangular home at even reasonable (but not widescreen
> wide) browser widths?
>
> Anyway, perhaps going easy on the number of divs is a good
> simplifying thing to do...
>
> In case anyone is interested in a simple structure, maybe:
>
> http://dorayme.netweaver.com.au/full_height.html
>
Hadn't thought of position: relative for this, but it's also the "trick"
for having children positioned absolute. There is something to a
relatively positioned container, it may the new "float" or overflow:
hidden as far as usefulness ;-) !

Jeff
From: dorayme on 14 Apr 2010 21:20
In article <hq5igs$nik$1(a)news.albasani.net>,
Jeff Thies <jeff_thies(a)att.net> wrote:

> dorayme wrote:
....
> > In case anyone is interested in a simple structure, maybe:
> >
> > http://dorayme.netweaver.com.au/full_height.html
> >
> Hadn't thought of position: relative for this, but it's also the "trick"
> for having children positioned absolute. There is something to a
> relatively positioned container, it may the new "float" or overflow:
> hidden as far as usefulness ;-) !
>


In fact, the position: relative is not needed for this. I should
have left it out and now have. It was a remnant from a different
page that *positioned* the footer (relative, so to speak, to the
element that had position: relative slapped on it to make it a
context that top, bottom, left and right are relative to rather
than the default viewport).

The above in fact employs a different, and I reckon simpler,
thing to get the footer down there
||
||
||
||
\/

It is actually just in the flow but negatively margined to bring
it back up below the 100% height of the main page div. The height
of the html, body and main page div has an effect on scrollbars
and changing browser heights and things, complicated to describe.
Basically, this above gets the footer to appear without having to
scrish for it.

--
dorayme
From: Gregor Kofler on 15 Apr 2010 12:26
dorayme meinte:

> I note you have solved prob to your satisfaction. But that has
> never stopped me talking anyway.

I know. However, since your comments are pretty useful most of the time...

> Presumably you know about trouble that happens with your stated
> url re the header and even text breaking out (to the right) of
> the nice rectangular home at even reasonable (but not widescreen
> wide) browser widths?

Yes. I find horizontal problems much easier to solve than vertical ones.
But that's perhaps just me. (Solved BTW, relying on min- and max-width;
will likely break in IE6.)

> Anyway, perhaps going easy on the number of divs is a good
> simplifying thing to do...
>
> In case anyone is interested in a simple structure, maybe:
>
> http://dorayme.netweaver.com.au/full_height.html

Nice try. Alas, doesn't work with longer texts (or in this case little
window heights) - the footer pushes into the content area. Replacing
height with min-height does away with that.

Gregor



--
http://www.gregorkofler.com
From: dorayme on 15 Apr 2010 17:59
In article <hq7eo6$226$1(a)newsreader2.utanet.at>,
Gregor Kofler <usenet(a)gregorkofler.com> wrote:

> dorayme meinte:
>
> > I note you have solved prob to your satisfaction. But that has
> > never stopped me talking anyway.
>
> I know. However, since your comments are pretty useful most of the time...
>
> > Presumably you know about trouble that happens with your stated
> > url re the header and even text breaking out (to the right) of
> > the nice rectangular home at even reasonable (but not widescreen
> > wide) browser widths?
>
> Yes. I find horizontal problems much easier to solve than vertical ones.
> But that's perhaps just me. (Solved BTW, relying on min- and max-width;
> will likely break in IE6.)
>

Yes, they are easier mostly. It is not just you, heights are
always a bit trickier. I like to leave them alone! Sticky footers
and anything to do with controlling heights are interesting as
exercises but in practice I actually like footers to simply go in
the flow and end below the rest and I doubt it bothers folk if
they do not stick to the bottom. So much easier to maintain and
less css and mark up.

> > Anyway, perhaps going easy on the number of divs is a good
> > simplifying thing to do...
> >
> > In case anyone is interested in a simple structure, maybe:
> >
> > http://dorayme.netweaver.com.au/full_height.html
>
> Nice try. Alas, doesn't work with longer texts (or in this case little
> window heights) - the footer pushes into the content area. Replacing
> height with min-height does away with that.
>

Yes er... um... Let this one go - to be used only in particular
contexts!

--
dorayme
From: Jeff Thies on 16 Apr 2010 01:13
dorayme wrote:
> In article <hq7eo6$226$1(a)newsreader2.utanet.at>,
> Gregor Kofler <usenet(a)gregorkofler.com> wrote:
>
>> dorayme meinte:
>>
>>> I note you have solved prob to your satisfaction. But that has
>>> never stopped me talking anyway.
>> I know. However, since your comments are pretty useful most of the time...
>>
>>> Presumably you know about trouble that happens with your stated
>>> url re the header and even text breaking out (to the right) of
>>> the nice rectangular home at even reasonable (but not widescreen
>>> wide) browser widths?
>> Yes. I find horizontal problems much easier to solve than vertical ones.
>> But that's perhaps just me. (Solved BTW, relying on min- and max-width;
>> will likely break in IE6.)
>>
>
> Yes, they are easier mostly. It is not just you, heights are
> always a bit trickier. I like to leave them alone! Sticky footers
> and anything to do with controlling heights are interesting as
> exercises but in practice I actually like footers to simply go in
> the flow and end below the rest and I doubt it bothers folk if
> they do not stick to the bottom. So much easier to maintain and
> less css and mark up.

What's wrong with position: fixed? There's an IE6 fix, I've posted
before.

I see limited use for sticky footers, just once for me, as navigation
for an image gallery where you didn't want to have to scroll for the
nav. Since most footers are just a reprise of nav that is elsewhere.
There are some designs (none, I've had to do) where a fixed footer would
be needed, otherwise min-height is more useful.

Jeff
>
>>> Anyway, perhaps going easy on the number of divs is a good
>>> simplifying thing to do...
>>>
>>> In case anyone is interested in a simple structure, maybe:
>>>
>>> http://dorayme.netweaver.com.au/full_height.html
>> Nice try. Alas, doesn't work with longer texts (or in this case little
>> window heights) - the footer pushes into the content area. Replacing
>> height with min-height does away with that.
>>
>
> Yes er... um... Let this one go - to be used only in particular
> contexts!
>
First  |  Prev  |  Next  |  Last
Pages: 1 2 3
Prev: Alternative to DIV in A (IE)
Next: Text line forcing min width of box