html - child 高度 : 100% and overflow:hidden 时无法滚动

Question

我正在尝试创建响应式网页。我有一个 60px 的标题 div，在它正下方有一个着陆 div，我想占据屏幕的其余部分(高度 100%)。 However, it overflows.我不能使用溢出:隐藏，因为当我放大时，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>

如何解决此问题，使我的着陆页不会溢出？

Answer 1

使用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>