yevg yevg - 15 days ago 9
Javascript Question

Multiple divs span height of parent

What is a good way to get multiple divs to span the height of their parent containing div which as a fixed height?

Please see diagram below:

enter image description here

Here is the proposed markup:

<div class="parent">

<div class="child"> div1 </div>

<div class="child"> div2 </div>

<div class="child"> div3 </div>

</div>


The child divs should always fill the entire height of parent div, despite how many of them there are but their height DOES NOT need to be equal and should change based on their content.

So if one has alot of content it would be larger and the rest would adjust accordingly.

I have done this using a table but figured there may be some simple way to do using just divs, which would be advantagous since they are more versatile for responsive layouts.

Is there a pure CSS solution to this?

Answer

Let's say you have this:

body {
  margin: 0;
}
.parent {
  background-color: peachpuff;
  min-height: 100vh;
}
.child:first-child {
  background-color: chartreuse;
}
.child:nth-child(2) {
  background-color: dodgerblue;
}
.child:last-child {
  background-color: coral;
}
<div class="parent">

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

  <div class="child">
    Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc odio leo, accumsan in ipsum eu, porttitor ornare sapien.
  </div>

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
  </div>

</div>


To achieve the requirement, you can use flexbox.

In your parent element use:

  • display: flex; to make it a flex-container.
  • flex-direction: column; to change the main-axis.

In your children elements use:

  • flex: 1; To distribute the free space among flex-items.

flex: <positive-number> Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

Source W3C.


body {
  margin: 0;
}
.parent {
  background-color: peachpuff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.child {
  flex: 1;
}
.child:first-child {
  background-color: chartreuse;
}
.child:nth-child(2) {
  background-color: dodgerblue;
}
.child:last-child {
  background-color: coral;
}
<div class="parent">

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

  <div class="child">
    Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc odio leo, accumsan in ipsum eu, porttitor ornare sapien.
  </div>

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
  </div>

</div>


jsFiddle

Comments