www.webdeveloper.com
Results 1 to 6 of 6

Thread: 100% hight div w/ hight:auto parent?

  1. #1
    Join Date
    Jan 2009
    Posts
    32

    Question 100% hight div w/ hight:auto parent?

    Hi all! I'm trying hard not to use tables, but can't figure out how to do this w/ box modeling. I would like a div that is auto hight so that it stretches to accommodate the contents. Inside that div I need 3 divs, left column (auto height), right column (auto height), and a divider in the middle which is like a middle column. That middle divider needs to be 100% height of the parent div so that it stretches w/ it. Kind of like a table, you know.

    I can't figure out how to do this. Everything I find on google tells me that for a div to be 100% height, height needs to be specified, either in percent or pixels on the parent div and all the way up to body/html. But I can't have that, the parent div needs to stretch and can't have a minimum height.

    Here's my mini-example code. As you can see the middle/divider column's got a non-existant height.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
        <head>
            <title>Test Div Stretch</title>
            <style type="text/css">
                #clearBoth {clear: both; visibility: hidden;}
                .container {border: 1px blue solid;}
                .col { float:left; border: 1px solid red; width: 300px;}
                .divider { width: 3px; height: 100%; background: green;}
            </style>
        </head>
        <body>
            <div class="container">
                <div id="leftCol" class="col">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
                <div id="midCol" class="col divider"></div>
                <div id="rightCol" class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</div>
                <div id="clearBoth"></div>
            </div>
        </body>
    </html>
    I'm almost ready to resort to tables.
    Any ideas?

    Thanks!

  2. #2
    Join Date
    Aug 2010
    Location
    Ohio
    Posts
    136
    set parent div to overflow: hidden, then in child divs you can set padding-bottom: 5000px margin-bottom: -5000px and then all child divs will be the height of the parent. Of course this wont work if you are trying to put content in the parent div (outside of other divs that is)

  3. #3
    Join Date
    Jan 2009
    Posts
    32
    Is this the only way to do this? What happens if the parent div grows to be more then 5000px hight? It might do that, because in my app one of the columns could contain an actual essay, it can span multiple printed pages. Setting an actual max height is not a good idea.

  4. #4
    Join Date
    Oct 2010
    Location
    Ohio
    Posts
    233
    Thats how I would do it personally, but can I ask why if your divider is just a 3px wide with a background... why dont you just use
    Code:
    #leftCol {
       border-right: 3px solid green;
    }

  5. #5
    Join Date
    Jan 2009
    Posts
    32
    There's 2 reasons:
    The code I posted just used a plane color because it's a simple example, I was originally going to use an image (gradient). The document should conform to CSS 2 specifications, so I can't use the CSS 3 image border thing.

    The 2nd reason is this: even if I were to just give up on the gradient divider and use solid color, which column's border should I use? If I use the right column's border, what if the left column is longer? Then the border won't stretch all the way down and will only go the length of the right column. And vice versa. If I use both column's border it's going to be 1/2 width for a segment where one column is longer then the other.

    I also can't use javascript to figure out which column is longer, because FlyingSaucer PDF generator does not evaluate javascript, it just does HTML and CSS 2.

    Is there a way I can use display: table properties somehow for this? I tried and they didn't do anything, but maybe I was doing it wrong or something.

  6. #6
    Join Date
    Jan 2009
    Posts
    32
    *Sigh* looks like no box modeling for me.

    /me goes to replace divs w/ tr/tds

    Thanks guys!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles