Can't scroll when child height: 100% and overflow:hidden

Question

I'm trying to create a responsive web page. I have a header div that's 60px, and a landing div right below it that I want to take up the rest of the screen (height 100%). However, it overflows. I can't use overflow:hidden because when I zoom in, I can't scroll down anymore.

**************CSS***************

#home{
    margin: 0;
    height: 100%;
    min-height: 100%;
    width: 100%;
}

.header  {  
    width: 100%;   
    height: 60px;       
    background-color: none;   
}  

.landing{
    margin: 0 auto; 
    height: auto;
    min-height: 100%;
    width: 100%;  
    background-color: yellow;
}


*************HTML*************

<div id="home">
    <div class="header"></div>
    <div class="landing"></div>
</div>

How do I fix this so that my landing page doesn't overflow?

Johannes · Accepted Answer · 2017-05-09T00:02:20.190

0

Use calc:

.landing {
  min-height: calc(100%-60px;);
  [...etc...]
}

html,
body {
  height: 100%;
  margin: 0;
}

#home {
  margin: 0;
  height: 100%;
  height: 100%;
  min-width: 100%;
}

.header {
  width: 100%;
  height: 60px;
  background-color: blue;
}

.landing {
  margin: 0 auto;
  height: auto;
  min-height: calc(100% - 60px);
  min-width: 100%;
  background-color: yellow;
}

<div id="home">
  <div class="header"></div>
  <div class="landing"></div>
</div>

edited May 09 '17 at 00:02

answered May 08 '17 at 23:55

Johannes

64,305
18
73
130

I tried adding that under .landing, and it didn't seem to work – J. Doe May 08 '17 at 23:59
you also need to set the body and HTML height to 100% to have a height reference for the `#home`element - see the snippet I added to my answer. – Johannes May 09 '17 at 00:02
Apparently you need white space for "-". Thanks! – J. Doe May 09 '17 at 00:06
I don't understand your comment? – Johannes May 09 '17 at 00:10
He means that when using calc, you must include spaces around the hyphen. This will work: `calc(100% - 60px);` and this will not: `calc(100%-60px);`. – JeremyS Feb 26 '19 at 21:53

score 0 · Answer 2 · edited May 23 '17 at 11:54

here is a full working example for a page with a 60px tall header, with the rest of the page being filled by a div. It uses flexbox (display: flex), I changed a few things from an answer here. You may have a to change a few things (classes, ids, etc.) to get it to work for you but this should work:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    html,body {
      height: 100%;
      margin: 0
    }

    .box {
      display: flex;
      flex-flow: column;
      height: 100%;
    }

    .box .row {
      border: 1px dotted grey;
    }

    .box .row.header {
      flex: 0 1 60px;
    }

    .box .row.content {
      flex: 1 1 auto;
      background-color: yellow;
    }

    </style>
  </head>
  <body>
    <div class="box">
      <div class="row header">
        <p><b>header (60 px tall)</b>
      </div>
      <div class="row content">
        <p>
          <b>content</b>
          (fills remaining space)
        </p>
      </div>
    </div>
  </body>
</html>

Can't scroll when child height: 100% and overflow:hidden

2 Answers2