Prev: Alternative to DIV in A (IE)
Next: Text line forcing min width of box
From: Gregor Kofler on 14 Apr 2010 14:35
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?

Gregor


--
http://www.gregorkofler.com
From: Jeff Thies on 14 Apr 2010 14:55
Gregor Kofler 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?

This appears to be the same problem I had. Note thread "the height of
a td" on April 5.


>> From Ben C
But what determines that height? Here's what the spec actually says
(10.5):

The percentage is calculated with respect to the height of the
generated box's containing block [p. 122] . If the height of the
containing block is not specified explicitly (i.e., it depends on
content height), and this element is not absolutely positioned, the
value computes to 'auto'.

There's no way out, other than explicitly setting a height.

Jeff
>
> Gregor
>
>
From: Gregor Kofler on 14 Apr 2010 15:12
On 2010-04-14 20:55, Jeff Thies wrote:
> Gregor Kofler 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?
>
> This appears to be the same problem I had. Note thread "the height of a
> td" on April 5.
>
>
> >> From Ben C
> But what determines that height? Here's what the spec actually says
> (10.5):
>
> The percentage is calculated with respect to the height of the
> generated box's containing block [p. 122] . If the height of the
> containing block is not specified explicitly (i.e., it depends on
> content height), and this element is not absolutely positioned, the
> value computes to 'auto'.

Ah, ok makes sense. Replacing the min-height: 100% with height: 100%
does the trick (_and_ makes sense). While trying all sorts of things I
frequently lose the track, what I have /not/ tried yet...

> There's no way out, other than explicitly setting a height.

Done & solved.

Thanks for the nudge, Gregor
From: Gregor Kofler on 14 Apr 2010 15:52
Gregor Kofler meinte:
> On 2010-04-14 20:55, Jeff Thies wrote:

>> The percentage is calculated with respect to the height of the
>> generated box's containing block [p. 122] . If the height of the
>> containing block is not specified explicitly (i.e., it depends on
>> content height), and this element is not absolutely positioned, the
>> value computes to 'auto'.
>
> Ah, ok makes sense. Replacing the min-height: 100% with height: 100%
> does the trick (_and_ makes sense). While trying all sorts of things I
> frequently lose the track, what I have /not/ tried yet...
>
>> There's no way out, other than explicitly setting a height.
>
> Done & solved.

Ah, no, not really. Well... The solution was to get rid of the inner div
altogether and do the "decoration stuff" in another way (that was the
only reason I needed the nested DIV originally). Now it works as expected.

Gregor



--
http://www.gregorkofler.com
From: dorayme on 14 Apr 2010 18:15
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

--
dorayme
 |  Next  |  Last
Pages: 1 2 3
Prev: Alternative to DIV in A (IE)
Next: Text line forcing min width of box