Re: Height:100% - XXXpx CSS issue

On Sep 23, 6:44 pm, dorayme <doraymeRidT...@xxxxxxxxxxxxxxx> wrote:
In article
<c7b0dac0-dbc9-44cf-9a06-576cfef57...@xxxxxxxxxxxxxxxxxxxxxxxxxxxx>,

 msoliver <michaelsoli...@xxxxxxxxx> wrote:
Okay, I believe this is one of the biggest issues found using CSS/DIV
layout. But, I haven't found a non-Javascript solution.

I would like two DIVs - first DIV, say with a height of 20px. The
second DIV with a height of 100% (the rest of the viewport).

There are different ways to skin this cat (your description is not quite
accurate but I sort of know what you mean).

This looks ok in FF 3, Safari 3 and iCab 4, Opera 9.5:

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

--
dorayme

Thanks, but unfortunately, there is a problem with your solution:

DIV top is 20 px high and DIV rest is 100% high. DIV rest appears to
be 100% - 20px, but it's the full height of the viewport. You can see
this if you remove the background of the top div. So, what's going on
is the top DIV is 20px and then the rest DIV is just layered
underneath the top DIV, but takes 100% of the viewport. The padding-
top: 20px makes the DIV rest content display in the right place, but
when I replace it with real content, it's clear that the height is
off...

Thanks.

- Mike
.

Relevant Pages

  • Two column layout with strange behaviour in Internet Explorer
    ... The problem I have only appears in Internet Explorer 6. ... table or the long word is rendered ok from the top of the DIV. ... width in a way that the table or the long word fits into the viewport, ... as this DIV containing the object I want to render. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: How to put scrollbars on a

    ... Because that now-displayed text sometimes overflows the viewport, ... tried to put scrollbars on the <div>, ... Logic should also tell you that there will be no vertical scrollbar without a HEIGHT specified since the div will expand in vertical size to accommodate the content. ...
    (comp.infosystems.www.authoring.html)
  • Re: Height:100% - XXXpx CSS issue
    ... I haven't found a non-Javascript solution. ... second DIV with a height of 100% (the rest of the viewport). ... DIV top is 20 px high and DIV rest is 100% high. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: How to put scrollbars on a

    ... Because that now-displayed text sometimes overflows the viewport, ... tried to put scrollbars on the <div>, ... no horizontal scrollbar if there is only justifiable text. ... also tell you that there will be no vertical scrollbar without a HEIGHT ...
    (comp.infosystems.www.authoring.html)
  • Re: How to put scrollbars on a

    ... Because that now-displayed text sometimes overflows the viewport, ... tried to put scrollbars on the <div>, ... no horizontal scrollbar if there is only justifiable text. ... also tell you that there will be no vertical scrollbar without a HEIGHT ...
    (comp.infosystems.www.authoring.html)