Changing heights of multiple divs dynamically depending on div with more content

Question

I have a section, inside two sections. Either one of these subsections could determine the size of the other.

And I've drawn up a quick codepen here: http://codepen.io/anon/pen/QyZbev

.outersection {
  width: 100%;
  overflow: scroll;
  height: 100vh;
}

.group-section {
  display: block;
  border: blue 1px solid;
  padding: 5px 0;
  height: 100%;
}

.code, .documentation {
  width: 50%;
  display: inline-block;
  border: 1px solid green;
  height: 100%;
  overflow: auto;
}

I tried this with JQuery and CSS only, but there will be more than 2 of these sections, each needing different heights. Neither attempt worked and I'm not convinced the JQuery way is dynamic enough for all sections.

The issue is that both sides don't end up matching heights and then the sides seem to be floating everywhere. They don't fill the encasing section and the divs seem to switch sides that they float on.

Thanks in advance!

That's a bad asked question. However, if I understand fine, your problem is the float you have: `.code { float: right; }` it crashes your layout and the blue border don't fits — Marcos Pérez Gude, Feb 05 '16 at 14:00
Maybe is this that you need: http://codepen.io/anon/pen/zrmqGw . Please, avoid floats to layouts. We are in 2016, that technique to layout needs to disappear. Floats are for floated elements, not for layouts — Marcos Pérez Gude, Feb 05 '16 at 14:02
My apologies, I've been staring at it for too long I missed the actual issue. I've added it onto the original question. The heights aren't matched, they don't fill the encasing section and the divs seem to switch sides that they float on. — liloka, Feb 05 '16 at 14:02
Ok, so i guess using `flex` is answer here. **[A complete guide to CSS FLEX](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)** — divy3993, Feb 05 '16 at 14:02
@Jai I know what you are trying to say but it's clear that OP has put time in the question itself which deserves an upvote. Also the fiddle shows the problem and the picture is what OP wants :) — A1rPun, Feb 05 '16 at 14:05
@A1rPun Nope! SO is QA site and this doesn't stand at that. Now you can see these days you can add snippets in the posts as well with little code icon when you post question/answer. That can be used then i would vote up for the effort. still going to see the third party site. — Jai, Feb 05 '16 at 14:09
I'm not fully understanding your question, but one would think that since you're setting sizes to 100% the divs would stretch to whatever size of content you have. — abetwothree, Feb 05 '16 at 14:09

magnudae · Accepted Answer · 2016-02-05T14:07:13.310

13

Use flexbox.

If you change to display: flex; in .group-section they will fill out their space. Because of default values the items will get stretch as default and then stretch out. You also need to remove 100% height on the code and documentation since this is both necessary and forces the small items to keep being small.

You probably should rewrite the css to fit more with a flex-"kind of way". With the correct use of flexbox you don't have to be aware of how many sections that arrive.

If you are not familiar with flexbox, you can read this.

edited Feb 05 '16 at 14:07

answered Feb 05 '16 at 14:03

magnudae

1,272
2
13
32

How is this not a valid solution? Flexbox is created just for this purpose. – magnudae Feb 05 '16 at 14:05
1

Ask to downvoter. It's often that downvoters here doesn't show his faces. It's frustating but it's true. However, it doesn't need flexbox, it's the same behaviour than inline-block. The only problem is mix the floats, and OP have it – Marcos Pérez Gude Feb 05 '16 at 14:07
2

Thank you Marcos for a great respond. I know, you don't need flexbox here, but it could help in a similar situation. – magnudae Feb 05 '16 at 14:08
1

I initially downvoted, because the question was unclear and I misunderstood what was being asked. Upvoted it now since it's the valid solution. – GMchris Feb 05 '16 at 14:11
I think the correct answer is from @BrianRay. I misunderstood the question too because OP don't explain well the problem and what needs – Marcos Pérez Gude Feb 05 '16 at 14:12
Thank you GMchris. Appreciate it – magnudae Feb 05 '16 at 14:12

score 6 · Answer 2 · answered Feb 05 '16 at 14:06

6

I added an auto-height class to all elements that needed to be equal height. Then I wrote a little jQuery function that calculates which element is the largest and sets all of them to that height.

function thisHeight(){
    return $(this).height();
}
$('.group-section').each(function(){
    var height = Math.max.apply(Math, $(this).find('.auto-height').map(thisHeight));
    $(this).find('.auto-height').height(height);
});

Here's a pen.

answered Feb 05 '16 at 14:06

Brian Ray

1,482
3
20
20

Foundation API have got the same with only a classname: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html – Marcos Pérez Gude Feb 05 '16 at 14:08

score 0 · Answer 3 · answered Feb 05 '16 at 14:20

Try something simple like flexbox:-

<div class="flex">
<article>
<p>blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb
</p>
</article>
<article class="third">
<p>blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb
</p>
</article>
</div>

css

    .flex {
    display: flex;
    flex-flow: row nowrap;
    width: 400px;
}
article{
  border:1px solid black;
  flex: 2 2 60%;
  width: 60%;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
}
article.third{
    flex: 1 1 30%;
    width: 32%;
}

score -1 · Answer 4 · answered Feb 05 '16 at 14:00

-1

So, it appears the issue here is that the inner elements or at least some of them have float left or right. This is fine, but floated elements need to be cleared, or else they won't really interact with the rest of the elements properly. To fix your issue I suggest adding this common class to your css, and applying it to the containers:

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

answered Feb 05 '16 at 14:00

GMchris

5,439
4
22
40

Do you mean both side content containers or the outside on that involves them both? I've tried on both of them - not at the same time and it hasn't worked either time. – liloka Feb 05 '16 at 14:10

Changing heights of multiple divs dynamically depending on div with more content

4 Answers4