當孩子身高：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％和溢出時不能滾動：隱藏

回答

相關問題