CODEWITHSUNDEEP
htmlcss
SystemicPlural
SystemicPlural

Reputation: 5789

How can multiple elements be equally padded over vertical space

If I have the following html/css how can I make it so that the content elements are equally spaced so that they take up the full area of the container - including the red area.

The padding between each element should be equal.

CSS only solution please.

#container {
  position: absolute;
  width: 100px;
  height: 400px;
  background-color: #f00;
}
.a,
.c {
  background-color: #ccc;
}
.b,
.d {
  background-color: #999;
}
<div id="container">
  <div class="content a">something</div>
  <div class="content b">something else</div>
  <div class="content c">something longer. something longer. something longer. something longer.</div>
  <div class="content d">not a lot</div>
</div>

Upvotes: 0

Views: 34

Answers (2)

Paulie_D
Paulie_D

Reputation: 115362

Using flexbox

#container {
  position: absolute;
  width: 100px;
  height: 400px;
  background-color: #f00;
  display: flex;
  flex-direction: column
}
.content {
  flex-grow: 1;
}
.a,
.c {
  background-color: #ccc;
}
.b,
.d {
  background-color: #999;
}
<div id="container">
  <div class="content a">something</div>
  <div class="content b">something else</div>
  <div class="content c">something longer. something longer. something longer. something longer.</div>
  <div class="content d">not a lot</div>
</div>

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78590

Would using display:table and display:table-row work in your case?

#container {
  position: absolute;
  width: 100px;
  height: 400px;
  background-color: #f00;
  display:table;
}
.content {display:table-row;}
.a,
.c {
  background-color: #ccc;
}
.b,
.d {
  background-color: #999;
}
<div id="container">
  <div class="content a">something</div>
  <div class="content b">something else</div>
  <div class="content c">something longer. something longer. something longer. something longer.</div>
  <div class="content d">not a lot</div>
</div>

Upvotes: 2

Related Questions