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

使用<xsl:with-param name="EndDate" select="$EndDate - xs:dayTimeDuration('P1D')"/>：

calc

＆＃13;

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

＆＃13;

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;
}

＆＃13;

Answer 2

这是一个包含60px高标题的页面的完整工作示例，页面的其余部分由div填充。它使用flexbox（display：flex），我从答案here改变了一些东西。您可能需要更改一些内容（类，ID等）以使其适合您，但这应该有效：

<!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>

儿童身高时无法滚动：100％且溢出：隐藏

2 个答案: