CODEWITHSUNDEEP
htmlcssflexbox
KevinKelbie
KevinKelbie

Reputation: 37

2 Elements fill remaining height

I have a div in the middle with content inside.

I wish to have the top and bottom divs fill the remaining space.

Something like this

<div class="container">
    <div class="top">

    </div>
    <div class="middle">
        Content
    </div>
    <div class="bottom">

    </div>
</div>

If possible I would like the set a min height for the top and bottom containers.

Upvotes: 1

Views: 56

Answers (3)

WizardCoder
WizardCoder

Reputation: 3461

Here is a table solution for all you purists.

html, body {
  margin: 0;
  height:100%;
}
.container {
  display: table;
  height: 100%;
  width: 100%;
}
.container > div {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.top, .bottom {
  background: #ADD8E6;
}
.middle {
  background: #90EE90;
  height:1px;
}
<div class="container">
  <div class="top">
    <div class="table-cell">

    </div>
  </div>
  <div class="middle">
    <div class="table-cell">
      Content
    </div>
  </div>
  <div class="bottom">
    <div class="table-cell">

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

Upvotes: 0

Asons
Asons

Reputation: 87201

With flexbox you can do that

html, body {
  margin: 0;
}
body {
  display: flex;            /*  IE fix  */
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;              /*  IE fix  */
}
.top, .bottom {
  flex: 1;                  /*  fill remaining space  */
  background: lightblue;
}
.middle {
  background: lightgreen;
}
<div class="container">
    <div class="top">

    </div>
    <div class="middle">
        Content
    </div>
    <div class="bottom">

    </div>
</div>

And if you need, you can also add a min-height to the top/bottom elements

html, body {
  margin: 0;
}
body {
  display: flex;            /*  IE fix  */
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;              /*  IE fix  */
}
.top, .bottom {
  flex: 1;                  /*  fill remaining space  */
  background: lightblue;
  min-height: 200px;        /*  set a min-height  */
}
.middle {
  background: lightgreen;
}
<div class="container">
    <div class="top">

    </div>
    <div class="middle">
        Content
    </div>
    <div class="bottom">

    </div>
</div>

Upvotes: 1

Oleg Markoff
Oleg Markoff

Reputation: 321

.top{
 min-height:100px;
}
.bottom{
 min-height:100px;
}

or you can use different meseurment - like vh - for view height and so on Forgot to add - it will go into your css file

Upvotes: 0

Related Questions