Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] 100% height within 100% height

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 15, 2014 at 10:28 pm #186347
    Chasew
    Participant

    I’m trying to get child divs to automatically expand to the height of their parent, which has fluidly expanded to fit the content of other child divs. I’m also working within a grid, which apparently complicates things because the grid boxes need to expand as well (solved). I’m assuming this is ultimately going to involve a nested display:table, but that hasn’t seemed to work, or I haven’t figured out how to do it properly.

    The closest I’ve gotten is very similar to what can be seen here (by someone else): http://jsfiddle.net/uL34X/1/

    Drag the divider down to shrink the height of the render window, and notice the content start spilling out of the containers. It seems that it forces the 100% height to be the fixed height of the parent (though parent isn’t actually fixed).

    So you have a parent with two children. One child at 100% tall, happens to come out to 100px tall with it’s content. The other child has no content, but still expands to 100% of it’s parent (100px). Great. But what if you want another div above that one? This new div is 50px tall. What I’d like, is the other one to shrink down to accomodate, but instead, it maintains that original 100% (100px) and spills out of the parent.

    That’s what I’ve been experiencing anyway…

    Here’s what I’m stuck at right now, minus the above failed attempts…
    http://codepen.io/chaseBank/pen/nfeKz

    Any ideas? Thanks!

    October 16, 2014 at 1:55 am #186352
    Paulie_D
    Member

    display:table won’t work in your current structure because the two ‘cells’ aren’t siblings.

    http://codepen.io/Paulie-D/pen/iBdze

    October 16, 2014 at 8:03 am #186393
    Chasew
    Participant

    Interesting, I suppose that makes sense. Although it still looks like you’re using it?

    Also, my main goal, where I seem to be having the most difficulty, is how would I then make the “body of text” expand to 100% of the rest of that div?

    And last, I simplified my original example down to only two blocks, just for the sake of simplicity… but I’m really needing three columns. In your example, adding a third makes them both show inline with the first, probably because there isn’t enough content in them to fill the gap.

    Either way, thanks for taking a look at this Paulie!

    October 16, 2014 at 8:20 am #186396
    Paulie_D
    Member

    Not entirely sure what you are trying to do but the usual way of managing the “equal height” thing is with javascript.

    October 16, 2014 at 9:28 am #186400
    Chasew
    Participant

    Here’s what I’m ultimately trying to accomplish: https://www.dropbox.com/s/01sidtkga4l9wlj/equal-height.gif?dl=0

    October 16, 2014 at 10:39 am #186402
    Paulie_D
    Member

    Yep JS would be the way to go.

    http://codepen.io/Paulie-D/pen/jFwCh/

    October 17, 2014 at 4:06 am #186435
    Chasew
    Participant

    Awesome! I think we’re getting somewhere!

    This is pretty much exactly what I’ve been looking for, with the help of your very effective JS
    http://codepen.io/chaseBank/pen/HucCi

    One thing I can’t figure out though, is what’s controlling the margins between the blocks?

    Thanks for all your help. I definitely have to dive farther into JS soon…

    October 17, 2014 at 4:15 am #186437
    Paulie_D
    Member

    One thing I can’t figure out though, is what’s controlling the margins between the blocks?

    Technically…nothing.

    The blocks are inline-block so they are affected by whitespace in the HTML which roughly equated to 0.25em (usually 4px).

    There are workarounds for this…one is to set the parents’ font-size to 0 and reset the font-size of the children…like so

    http://codepen.io/Paulie-D/pen/btBAC

    October 17, 2014 at 4:28 am #186438
    Chasew
    Participant

    Awesome.

    Is removing the line break between them an acceptable solution as well?

    <div>content</div><div>content</div

    October 17, 2014 at 4:33 am #186439
    Paulie_D
    Member

    Is removing the line break between them an acceptable solution as well

    Absolutely….it’s the other main ‘go to’ way to deal with whitespace.

    October 17, 2014 at 4:36 am #186440
    Chasew
    Participant

    Thanks so much for all your help, very appreciated.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.