当孩子身高：100％和溢出时不能滚动：隐藏

我正在尝试创建一个响应式网页。我有一个60px的标题div，下面有一个着陆div，我想占据屏幕的其余部分（高度100％）。 However, it overflows.我不能使用溢出：隐藏，因为当我放大，I can't scroll down anymore.当孩子身高：100％和溢出时不能滚动：隐藏

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

我该如何解决这个问题，使我的目标网页不溢出？

来源

2017-05-08 J. Doe

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

来源

2017-05-08 23:55:33 Johannes

我尝试添加，根据.landing，和它似乎并没有工作 –

你还需要设置正文和HTML高度为100％以具有'＃home'element的高度参考 - 请参阅我添加到我的答案的片段。 – Johannes

显然你需要“ - ”的空格。谢谢！ –

这里是一个60像素高的头一个页面一个完整的工作示例，与页面的其余部分由一个div填补。它使用flexbox（display：flex），我从答案here中改变了一些东西。你可能有一个改变了一些东西（类，IDS等）得到它为你工作，但是这应该工作：

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

来源

2017-05-09 00:08:23 Slam

当孩子身高：100％和溢出时不能滚动：隐藏

回答

相关问题