How to make inner div to match at least the height of the body?

Question

Here's is an example of what I want working fine if the div is a child element of the body using min-height:

<!DOCTYPE html>
<html>
<head>
<style>
html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.outer-wrap{
  min-height: 100%;
}
.table-layout{
  display: table;
  min-height: 100%;
  width: 100%;
}
.table-cell{
  display: table-cell;
  width: 50%;
  padding: 2%;
}
.blue{
  background: #55a;
}
.grey{
  background: #bbb;
}
</style>
</head>
<body>
  <div class="outer-wrap">
    <div class="table-layout">
      <div class="table-cell blue">
        test
      </div>
      <div class="table-cell grey">
        content<br />
        <br />
        content<br />
        <br />
        content<br />
        <br />
      </div>
    </div>
  </div>
</body>
</html>

https://codepen.io/anon/pen/OjxmGj

However, when I add an outer div with min-height:100%; the inner div no longer fills the height of the body:

<!DOCTYPE html>
<html>
<head>
<style>
html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.outer-wrap{
  min-height: 100%;
}
.table-layout{
  display: table;
  min-height: 100%;
  width: 100%;
}
.table-cell{
  display: table-cell;
  width: 50%;
  padding: 2%;
}
.blue{
  background: #55a;
}
.grey{
  background: #bbb;
}
</style>
</head>
<body>
    <div class="table-layout">
      <div class="table-cell blue">
        test
      </div>
      <div class="table-cell grey">
        content<br />
        <br />
        content<br />
        <br />
        content<br />
        <br />
      </div>
    </div>
</body>
</html>

https://codepen.io/anon/pen/JyrNVj

It's not really practical for me to update the entire layout to get this working so I'm hoping there is another way to make this work without removing the outer div.

score 1 · Accepted Answer · answered Aug 14 '17 at 12:40

1

Insert "height: 100vh;" to the inner div.

Refer to this SO post on Viewport-Percentage for more details.

Using Inspect, this seemed to produce the desired results.

answered Aug 14 '17 at 12:40

JohnH

1,920
4
25
32

Wow, this works perfectly and I've never even heard of vh before! Extremely useful, thank you! – user7862512 Aug 14 '17 at 12:45

Kiran Dash · Answer 2 · 2017-08-14T12:35:51.523

0

Just add height: 1px to the class outer-wrap and keep min-height: 100%.

html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.outer-wrap{
  min-height: 100%;
  height: 1px;
}
.table-layout{
  display: table;
  min-height: 100%;
  width: 100%;
}
.table-cell{
  display: table-cell;
  width: 50%;
  padding: 2%;
}
.blue{
  background: #55a;
}
.grey{
  background: #bbb;
}

<div class="outer-wrap">
  <div class="table-layout">
    <div class="table-cell blue">
      test
    </div>
    <div class="table-cell grey">
      content<br />
      <br />
      content<br />
      <br />
      content<br />
      <br />
    </div>
  </div>
</div>

edited Aug 14 '17 at 12:35

answered Aug 14 '17 at 12:26

Kiran Dash

4,816
12
53
84

This doesn't work because I want the outer div to expand beyond 100% if needed. – user7862512 Aug 14 '17 at 12:29
Ok. try having `height: 1px` to outerwrap. Check updated answer. See if that solves the issue. – Kiran Dash Aug 14 '17 at 12:36

score 0 · Answer 3 · answered Aug 14 '17 at 12:36

You can change min-width to width on both elements and add overflow-y: visible; to allow it to extend vertically if necessary:

.outer-wrap {
  height: 100%;
  overflow-y: visible;
}
.table-layout {
  display: table;
  height: 100%;
  overflow-y: visible;
  width: 100%;
}

https://codepen.io/anon/pen/dzVRvN

How to make inner div to match at least the height of the body?

3 Answers3