SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    michigan
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A CSS substitute for height="100%"?

    Is there a way to dynamically stretch the height of a DIV to match the height of another DIV?

    For example: I have a DIV on the left for navigation and a DIV on the right for content. The content box will be various sizes, depending on how many messages I post and how wordy they are. I just want the box that contains the navigation to stretch to be the same size as the box that contains the content.

    I would like to do this without using any sort of frames, tables or JavaScript.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You can't do it without tables and/or Javascript, sorry. Well, you can (by using "display: table-cell;") but it won't work in IE for Windows, though it will work in Mozilla or Opera.

  3. #3
    SitePoint Member
    Join Date
    Oct 2003
    Location
    michigan
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, this is bad news indeed.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually in this thread

    http://www.sitepointforums.com/showt...hreadid=134830

    ("height in CSS?")

    I just posted a link http://pietrot.free.fr/full_height.htm that may be of interest.

    The goal here was a bit different (the bar(s) must stretch down to bottom of the window) but I ended up giving a border to my content div to simulate a sidebar background (different color) so the sidebar seems to

    Quote Originally Posted by BobbyMichael
    stretch to be the same size as the box that contains the content
    in the browsers that won't pull it all the way down.

  5. #5
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Could you create a container div and then set the other interior divs to the height of the container? Is that possible at all?

  6. #6
    SitePoint Member
    Join Date
    Oct 2003
    Location
    michigan
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Hartmann
    Could you create a container div and then set the other interior divs to the height of the container? Is that possible at all?
    Could you show an example of what you mean? Will this method work?

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Hartmann
    Could you create a container div and then set the other interior divs to the height of the container? Is that possible at all?
    That's what display: table-cell; would do. Basically that container div would act as a table row.

  8. #8
    1-800-JMULDER JMulder's Avatar
    Join Date
    May 2001
    Location
    The Netherlands
    Posts
    1,745
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldn't a non-IE solution be assigning height: 100% to the body and then assign min-height: 100% to the divs?

    You'd be stuck with a JS expression in your CSS file though to make IE happy.
    Jeroen Mulder

    w: www.jeroenmulder.com

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Hartmann
    Could you create a container div and then set the other interior divs to the height of the container? Is that possible at all?
    No, actually I'm realizing that "height:100%" has actually no effect at all except in IE5 Mac.

    It's "bottom:0" that does it, quite logically.

    I got it working on Netscape 7 Mac/PC (no scrollbars), Opera 5 Mac, Opera 7 PC, IE5 Mac, IE5 PC.

    At the end of the day, the margins that simulate the bars are only for IE5 Mac which doesn't seem to react to "bottom:0" but responds to "height:100%" attribute in the content div inside the container. So the container expands down to bottom -- and I think that's where those scrollbars come from.

    I have no idea why this particular div stretches like that.

    IE6 just won't listen.

    From best down: Netscape 7, Opera, IE5, IE6.

    Have updated the code, I'll update comments as well on the demo page.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyway if I understand what Bobby Michael wanted to achieve in the first place, it could be done with a border filling in for the missing part of the sidebar:

    Code:
    #left 
    { 
    position:absolute;
    z-index:1;
    WIDTH:150px;
    BACKGROUND-COLOR:RED;
    /* or transparent */
    }
    
    #main 
    {
    position:absolute;
    z-index:0;
    BORDER-LEFT:150px solid RED;
    }
    Assuming the sidebar doesn't have to have a background-image.

    Example here:
    http://pietrot.free.fr/bobbysbar.htm

  11. #11
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been trying and trying to figure out an easy way to do this! Based on what you said, I tried this. Is it possible that this really works?

    http://www.eodweb.com/test/test3.htm

    Somebody, burst my "ignorance is bliss" bubble?? Here's the applicable code.

    Code:
    #left {
    	position: absolute;
    	top: 79px;
    	width: 130px;
    	/*height: 735px;*/
    	padding: 30px 15px;
    	/*background-color: #cc9;*/
    	color: #033;
    	text-align: center;
    }
    #content {
    	margin-left: 0;
    	padding: 20px 20px 85px 20px;
    	background-color: #f0f0e0;
    	color: #000;
    	border-bottom: solid #cc9 1px;
    	border-right: solid #cc9 1px;
    	border-left: solid #cc9 160px;
    	clear: both;
    }
    basically, because of what was suggested in this thread I got rid of the height and background color of my left sidebar. I created a left border for my content div to 'fill' the color for the left sidebar. My content in the left sidebar won't change so that's not an issue...

    oh no......is this a hack? or is this acceptable use of CSS?

    T
    Last edited by TBanks; Oct 26, 2003 at 04:42.
    dare to Dream, dare to Be...
    www.eodweb.com

  12. #12
    SitePoint Zealot Website Rob's Avatar
    Join Date
    Aug 2000
    Location
    Alberta, Canada
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although I'm not exactly sure, what it is you are trying to accomplish, the test3 page looks very nice indeed -- in both Mozilla & IE6 it showed the same.

    Well done.

  13. #13
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Rob - I just wanted the two columns to be the same height, across browsers, independent of how much content was in the content div - oh, in a flexible layout!

    I've had a headache over this for about a week - as I'm still learning CSS! hence my questions about does this "really" work and is it ok to use
    dare to Dream, dare to Be...
    www.eodweb.com

  14. #14
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi TBanks,

    yes, that's exactly what I was trying to convey!

    However:

    Quote Originally Posted by TBanks
    I just wanted the two columns to be the same height, across browsers, independent of how much content was in the content div
    Not really: if your left content is 'bigger' than main content, the left bar will stretch down past the main content (without background in your example).

    I looked at your page in Netscape 7, Mac: perfect.

    In IE5 Mac, there's a zone of darker background going over the main 'Lorem ipsum' text. It stretches from nav as far down as left content, 100% wide.

    To avoid that, I think you should give a fixed height to your #nav maybe.

  15. #15
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pietro
    if your left content is 'bigger' than main content, the left bar will stretch down past the main content
    true (thinking out loud here) so in my case it's ok, as that content won't change - but in your example, yours works for changing content amounts!

    Quote Originally Posted by pietro
    I looked at your page in Netscape 7, Mac: perfect.
    thanks!

    Quote Originally Posted by pietro
    In IE5 Mac, there's a zone of darker background going over the main 'Lorem ipsum' text. It stretches from nav as far down as left content, 100% wide.
    I posted this earlier - related? http://www.sitepointforums.com/showt...hreadid=135182

    Quote Originally Posted by pietro
    To avoid that, I think you should give a fixed height to your #nav maybe.
    I'll try that - and this might take care of the above problem?

    I'm a little frustrated though because I don't have a Mac and I can't see the changes! is a fixed height to my #nav going to through anything else off? It seems the 'height' property can cause problems in finicky browsers?

    Thanks!

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  16. #16
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    TBanks,

    I was wrong here:

    Quote Originally Posted by pietro
    To avoid that, I think you should give a fixed height to your #nav maybe.
    I let myself slip into thinking "height" again, which I guess should be avoided (seldom works, 'problems in finicky browsers' and so on).

    I played around with your test3.css and I could get rid of the IE5 Mac problem by setting "display:inline" for your #nav ul .

    But this caused the #nav (now the correct height) to stretch way beyond the window width on the right, generating a huge bottom scrollbar . The bottom scrollbar problem would be IE5Mac-specific as far as I know.

    The nav links stayed right where they belong though.

    Oh well.

    Anyway you absolutely grasped what I meant in the example, post #10 above:

    http://pietrot.free.fr/bobbysbar.htm

  17. #17
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pietro
    I played around with your test3.css........Anyway you absolutely grasped what I meant in the example, post #10 above
    thanks for trying - I may have to pick up a mac somewhere so I can test on it. I really want to be coding with web standards, and I'm seeing that I can't afford to not be able to 'test' cross platform.

    Thanks for leading me in the right direction on this - it's sooo helpful!

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  18. #18
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Toni,
    glad if it helped .

    Actually I just checked for validation a test page I did while trying to straighten out the whole "height" business:

    http://pietrot.free.fr/full_height.htm


    Well, the page does validate (CSS, XHTML transitional)!!

    So

    Quote Originally Posted by TBanks

    is this acceptable use of CSS?


    Also I got a bit carried away here:

    Quote Originally Posted by pietro

    "height" (...) should be avoided
    I think "height" is fine to use when you can set fixed height.

    About testing, yes, life is full of mostly unpleasant surprises if you don't.

    I test on IE5 Mac/PC, Netscape 6 and 7 PC, Netscape7 Mac, Opera7 PC, Opera5 Mac (don't know if there's a later version, should check) and I find Netscape and Opera have the best rendering (Netscape is practically flawless). Wish I could test Safari but I don't run MacOSX.

    Cheers
    P
    Last edited by pietro; Jul 9, 2005 at 04:38.

  19. #19
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for everything P!
    dare to Dream, dare to Be...
    www.eodweb.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •