CSS div height 100% ??

Discussion in 'HTML' started by Nico Schuyt, Nov 20, 2003.

  1. Nico Schuyt

    Nico Schuyt Guest

    The last couple of hours I desperately tried to give a div containing a menu
    the same height as the div with the content.
    In standard mode it's not a problem buth with doctype 'strict' I fail.
    Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    The height of the left (menu) div however is not more than the height of the
    screen.

    Your help is appreciated!
    Nico
    Nico Schuyt, Nov 20, 2003
    #1
    1. Advertising

  2. Nico Schuyt

    John W. Guest

    "Nico Schuyt" <> wrote:

    >The last couple of hours I desperately tried to give a div containing a menu
    >the same height as the div with the content.
    >In standard mode it's not a problem buth with doctype 'strict' I fail.
    >Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    >The height of the left (menu) div however is not more than the height of the
    >screen.
    >

    You looked with IE, in Moz + O it's worse :-(


    John OO
    --
    <http://webcel.nl/> webshopsoftware + more

    "Time is what prevents everything from happening at once"
    - John Archibald Wheeler -
    John W., Nov 20, 2003
    #2
    1. Advertising

  3. Nico Schuyt

    picayunish Guest

    Nico Schuyt wrote in news:3fbd23b0$0$56498$:
    > The last couple of hours I desperately tried to give a div containing a
    > menu the same height as the div with the content.
    > In standard mode it's not a problem buth with doctype 'strict' I fail.
    > Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    > The height of the left (menu) div however is not more than the height of
    > the screen.
    >
    > Your help is appreciated!


    Correct me when I'm wrong.
    When using 100% for the height or width it means the maximum height or
    width of the browser window that the visitor has set. In your case try to
    use a height of 253% or try using em for height.
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Underconstruction
    picayunish, Nov 20, 2003
    #3
  4. Nico Schuyt

    rf Guest

    "Nico Schuyt" <> wrote in message
    news:3fbd23b0$0$56498$...
    > The last couple of hours I desperately tried to give a div containing a

    menu
    > the same height as the div with the content.
    > In standard mode it's not a problem buth with doctype 'strict' I fail.
    > Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    > The height of the left (menu) div however is not more than the height of

    the
    > screen.
    >
    > Your help is appreciated!


    The general consensus is that this can't be done without resorting to CSS
    tables which, of course, don't work on a certain high profile browser.

    There are some suggested workarounds, mainly involving backgrounds, so it
    "looks" like the left hand div extends to the bottom of the content.

    Here is a page where I was experimenting with it. The middle bit is what you
    are after. Fiddle around with those commented out borders to see what is
    hapenning.

    http://users.bigpond.net.au/rf/html/notable.html

    Cheers
    Richard.
    rf, Nov 20, 2003
    #4
  5. Nico Schuyt wrote:
    > The last couple of hours I desperately tried to give a div containing a menu
    > the same height as the div with the content.
    > In standard mode it's not a problem buth with doctype 'strict' I fail.
    > Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    > The height of the left (menu) div however is not more than the height of the
    > screen.
    >
    > Your help is appreciated!
    > Nico
    >
    >

    The height is the same using Mozilla 1.5
    Wayne D Hammond, Nov 21, 2003
    #5
  6. "rf" <> writes:

    > "Nico Schuyt" <> wrote:


    >> The last couple of hours I desperately tried to give a div containing a
    >> menu the same height as the div with the content.


    Use a table. DIV-soup isn't any better.

    >> Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    >> The height of the left (menu) div however is not more than the height of
    >> the screen.


    I wouldn't use float in the first place; anyway, you are trying to make
    things far too complicated. Quick and lazy:

    <http://sandbox.bednarz.nl/css/height/float.html>

    > The general consensus is that this can't be done without resorting to CSS
    > tables which, of course, don't work on a certain high profile browser.


    Too bad I've missed that. ;)

    By the way, random markup is only needed for the high profile browser to
    accomplish such an effect.

    <http://sandbox.bednarz.nl/css/height/cols.html>

    (there are some possible problems with narrow windows/large font sizes
    if viewed with MSIE because of the URI string at the bottom, something
    I'm currently to lazy to fix, but that's unrelated to the OP's query)


    --
    | ) Eric Bednarz
    -(
    | ) http://bednarz.nl/
    Eric B. Bednarz, Nov 21, 2003
    #6
  7. Nico Schuyt

    Nico Schuyt Guest

    Eric B. Bednarz wrote:
    >> "Nico Schuyt" <> wrote:


    >>> The last couple of hours I desperately tried to give a div
    >>> containing a menu the same height as the div with the content.


    > Use a table. DIV-soup isn't any better.


    Maybe you're right :)

    >>> Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    >>> The height of the left (menu) div however is not more than the
    >>> height of the screen.


    > I wouldn't use float in the first place; anyway, you are trying to
    > make things far too complicated. Quick and lazy:
    > http://sandbox.bednarz.nl/css/height/float.html


    So, one column instead of two. I must admit I didn't think of that!
    In this particular case I thought I needed two columns in order to show the
    possibilities of CSS (e.g change the order of the columns: menu on the right
    for example). But maybe I can do that with one column too.

    Thanks!!
    Nico
    Nico Schuyt, Nov 21, 2003
    #7
  8. Nico Schuyt

    Nico Schuyt Guest

    picayunish wrote:
    > Nico Schuyt wrote in news:3fbd23b0$0$56498$:
    >> The last couple of hours I desperately tried to give a div
    >> containing a menu the same height as the div with the content.
    >> In standard mode it's not a problem buth with doctype 'strict' I
    >> fail. Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    >> The height of the left (menu) div however is not more than the
    >> height of the screen.
    >>
    >> Your help is appreciated!

    >
    > Correct me when I'm wrong.
    > When using 100% for the height or width it means the maximum height or
    > width of the browser window that the visitor has set.


    I think you're right.

    > In your case
    > try to use a height of 253% or try using em for height.


    Not practical I'm affraid. Probably the solution offered by Eric Bednarz
    (one column) is the easiest approach
    Thanks for your help.
    Nico
    Nico Schuyt, Nov 21, 2003
    #8
  9. Nico Schuyt

    Nico Schuyt Guest

    rf wrote:
    > "Nico Schuyt" <> wrote


    >> The last couple of hours I desperately tried to give a div
    >> containing a menu the same height as the div with the content.
    >> In standard mode it's not a problem buth with doctype 'strict' I
    >> fail. Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    >> The height of the left (menu) div however is not more than the
    >> height of the screen.


    > The general consensus is that this can't be done without resorting to
    > CSS tables which, of course, don't work on a certain high profile
    > browser.
    > There are some suggested workarounds, mainly involving backgrounds,
    > so it "looks" like the left hand div extends to the bottom of the
    > content.


    Seems to be the best solution so far.

    > Here is a page where I was experimenting with it. The middle bit is
    > what you are after. Fiddle around with those commented out borders to
    > see what is hapenning.
    > http://users.bigpond.net.au/rf/html/notable.html


    Ehhh, what's the intention of the test page? I don't see high columns
    anywhere (must be my age :-(

    Thanks so far,
    Nico
    Nico Schuyt, Nov 21, 2003
    #9
  10. Nico Schuyt

    Nico Schuyt Guest

    Wayne D Hammond wrote:
    > Nico Schuyt wrote:


    >> <snip>
    >> Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    >> The height of the left (menu) div however is not more than the
    >> height of the screen.


    > The height is the same using Mozilla 1.5


    So there is hope :) I think I'll wait a couple of years till all browsers
    have a new version and try again.
    Thanks,
    Nico
    Nico Schuyt, Nov 21, 2003
    #10
  11. Nico Schuyt

    Nico Schuyt Guest

    John W. wrote:
    > "Nico Schuyt" <> wrote:


    >> Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    >> The height of the left (menu) div however is not more than the
    >> height of the screen.


    > You looked with IE, in Moz + O it's worse :-(


    Give me only the good news :)
    Nico
    Nico Schuyt, Nov 21, 2003
    #11
  12. Nico Schuyt

    rf Guest

    "Nico Schuyt" <> wrote in message
    news:3fbdd2af$0$196$...
    > Eric B. Bednarz wrote:
    > >> "Nico Schuyt" <> wrote:

    >
    > >>> The last couple of hours I desperately tried to give a div
    > >>> containing a menu the same height as the div with the content.

    >
    > > Use a table. DIV-soup isn't any better.

    >
    > Maybe you're right :)
    >
    > >>> Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    > >>> The height of the left (menu) div however is not more than the
    > >>> height of the screen.

    >
    > > I wouldn't use float in the first place; anyway, you are trying to
    > > make things far too complicated. Quick and lazy:
    > > http://sandbox.bednarz.nl/css/height/float.html

    >
    > So, one column instead of two. I must admit I didn't think of that!
    > In this particular case I thought I needed two columns in order to show

    the
    > possibilities of CSS (e.g change the order of the columns: menu on the

    right
    > for example). But maybe I can do that with one column too.
    >
    > Thanks!!
    > Nico


    Did you miss my prior post Nico? The one Eric responde to?

    Cheers
    Richard.
    rf, Nov 21, 2003
    #12
  13. Nico Schuyt

    Nico Schuyt Guest

    rf wrote:
    > Did you miss my prior post Nico? The one Eric responde to?


    Of course not :) My reply was:

    rf wrote:
    > "Nico Schuyt" <> wrote


    >> The last couple of hours I desperately tried to give a div
    >> containing a menu the same height as the div with the content.
    >> In standard mode it's not a problem buth with doctype 'strict' I
    >> fail. Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    >> The height of the left (menu) div however is not more than the
    >> height of the screen.


    > The general consensus is that this can't be done without resorting to
    > CSS tables which, of course, don't work on a certain high profile
    > browser.
    > There are some suggested workarounds, mainly involving backgrounds,
    > so it "looks" like the left hand div extends to the bottom of the
    > content.


    Seems to be the best solution so far.

    > Here is a page where I was experimenting with it. The middle bit is
    > what you are after. Fiddle around with those commented out borders to
    > see what is hapenning.
    > http://users.bigpond.net.au/rf/html/notable.html


    Ehhh, what's the intention of the test page? I don't see high columns
    anywhere (must be my age

    Thanks so far,
    Nico
    Nico Schuyt, Nov 21, 2003
    #13
  14. Nico Schuyt

    rf Guest

    "Nico Schuyt" <> wrote in message
    news:3fbdd54d$0$196$...
    > rf wrote:
    > > "Nico Schuyt" <> wrote

    >
    > >> The last couple of hours I desperately tried to give a div
    > >> containing a menu the same height as the div with the content.
    > >> In standard mode it's not a problem buth with doctype 'strict' I
    > >> fail. Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
    > >> The height of the left (menu) div however is not more than the
    > >> height of the screen.

    >
    > > The general consensus is that this can't be done without resorting to
    > > CSS tables which, of course, don't work on a certain high profile
    > > browser.
    > > There are some suggested workarounds, mainly involving backgrounds,
    > > so it "looks" like the left hand div extends to the bottom of the
    > > content.

    >
    > Seems to be the best solution so far.
    >
    > > Here is a page where I was experimenting with it. The middle bit is
    > > what you are after. Fiddle around with those commented out borders to
    > > see what is hapenning.
    > > http://users.bigpond.net.au/rf/html/notable.html

    >
    > Ehhh, what's the intention of the test page? I don't see high columns
    > anywhere (must be my age :-(


    I'm sorry, the test page is just that, a test page. Here, I have built
    another one:
    http://users.bigpond.net.au/rf/test/notable1.html

    The idea is that you change the width of your canvas. With a wide canvas the
    navbar column is longer. With a narrow canvas the content column is longer.
    It *looks* like both columns are the same height but, in fact they are not,
    as evidenced by
    http://users.bigpond.net.au/rf/test/notable1b.html
    where large borders have been turned on for the two offending divs.

    Of course you have to be using IE out of quirks mode. Mozilla gets it
    different/wrong/right/I dunno. IIRC I gave up on this exercise just after I
    discovered this and came to the conclusion that until all the browsers
    support CSS tables then just do it in an HTML table and be damned to the
    purists <g/> who insist that a table can not be used for layout when it is,
    in fact, the only viable alternative in this situation.

    <aside>
    I once tried to repair my car <grin/>. That rubber thing in the front end
    suspension was perished. Well I could not get the suspension apart. Spanners
    didn't work, my Dad's puller thingo didn't work, a hammer didn't work. Took
    the offending car to the Expert Car Repairer. He produced a ten pound
    brickies sledgehammer and with one bloody big wack instantly dismantled the
    front end. Didn't break anything, just knew where to hit, how hard to hit,
    and *which tool to use*
    </aside>

    Cheers
    Richard.
    rf, Nov 21, 2003
    #14
  15. Nico Schuyt

    rf Guest

    "Nico Schuyt" <> wrote in message
    news:3fbde010$0$214$...
    > rf wrote:
    > > Did you miss my prior post Nico? The one Eric responde to?

    >
    > Of course not :) My reply was:


    S'alright. I should have just waited a minute or so. Everybodys post's are
    dribbling in slowly at the moment. Bigswamp has some problems :)

    Cheers
    Richard.
    rf, Nov 21, 2003
    #15
  16. Nico Schuyt

    Nico Schuyt Guest

    rf wrote:
    > Nico Schuyt wrote:
    >> rf wrote:


    >>> http://users.bigpond.net.au/rf/html/notable.html


    >> Ehhh, what's the intention of the test page? I don't see high columns
    >> anywhere (must be my age :-(

    >
    > I'm sorry, the test page is just that, a test page. Here, I have
    > built another one:
    > http://users.bigpond.net.au/rf/test/notable1.html
    > Of course you have to be using IE out of quirks mode. Mozilla gets it
    > different/wrong/right/I dunno. IIRC I gave up on this exercise just
    > after I discovered this and came to the conclusion that until all the
    > browsers support CSS tables then just do it in an HTML table and be
    > damned to the purists <g/> who insist that a table can not be used
    > for layout when it is, in fact, the only viable alternative in this
    > situation.


    I give up too :)

    > <aside>
    > I once tried to repair my car <grin/>. That rubber thing in the front
    > end suspension was perished. Well I could not get the suspension
    > apart. Spanners didn't work, my Dad's puller thingo didn't work, a
    > hammer didn't work. Took the offending car to the Expert Car
    > Repairer. He produced a ten pound brickies sledgehammer and with one
    > bloody big wack instantly dismantled the front end. Didn't break
    > anything, just knew where to hit, how hard to hit, and *which tool to
    > use* </aside>


    I'm about to use that sledgehammer for my site :)

    Thanks again!
    Nico
    Nico Schuyt, Nov 21, 2003
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Not4u
    Replies:
    9
    Views:
    1,039
    Not4u
    Feb 27, 2004
  2. Replies:
    8
    Views:
    6,687
    Neredbojias
    Dec 9, 2005
  3. CSS div height 100%

    , May 22, 2006, in forum: HTML
    Replies:
    3
    Views:
    29,368
    Neredbojias
    May 22, 2006
  4. fred
    Replies:
    3
    Views:
    273
    Zifud
    Mar 17, 2005
  5. Replies:
    5
    Views:
    880
Loading...

Share This Page