Re: Height:100% - XXXpx CSS issue

In article
<52c5d17b-f2da-4686-85b8-6600b107e547@xxxxxxxxxxxxxxxxxxxxxxxxxxxx>,
msoliver <michaelsoliver@xxxxxxxxx> wrote:

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.

which was one of your descriptions. You see, there is a contradiction in
your description and I took one of the horns on the principle of
charitable interpreation. You said 100% and I assumed this is 100% of
viewport. True, you also said the second div should be "the rest"
implying viewport minus 20px. But no one can know what percentage this
is so unless one knows exactly what the user has opened his browser to
(js come to mind). Why did you mention a percentage? Surely not for the
vacuous reason that anything at all is 100% of what it is?


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...


When you replace the 20px high dive with real content? You can't get
much content in 20px high!

Is there a chance that you can post a URL with almost the same length
and type of content you want. Otherwise we are just playing theoretical
games with not quite well defined parameters. It is best for me to
understand what you are wanting to do on the whole. I gave you 100% div,
I gave you 20px div and like little Thomas the Tank Engine, I tried my
very best

--
dorayme
.

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: Middle div with flexible height
    ... I want them aligned with the top and bottom of the viewport, ... I want the second div to occupy the full remaining ... things to the bottom of the viewport is always asking for trouble. ...
    (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: 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)
  • Middle div with flexible height
    ... The first and third divs have intrinsic heights, ... I want them aligned with the top and bottom of the viewport, ... I want the second div to occupy the full remaining ...
    (comp.infosystems.www.authoring.stylesheets)