html - child 高度:100％并溢出:隐藏时无法滚动

我正在尝试创建一个响应式网页。我有一个60像素的标头div，在它下面有一个着陆div，我想占用屏幕的其余部分（高度100％）。 However, it overflows.我不能使用overflow：hidden，因为当我放大时，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>

如何解决此问题，以使目标网页不会溢出？

最佳答案

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

关于html - child 高度:100％并溢出:隐藏时无法滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43858911/