高度不能在身體骨架上工作

這是我在Stack上的第一個問題，我希望有人能幫助我。高度不能在身體骨架上工作

我與我的骷髏建立的頁面有問題。問題是我無法將「高度」設置爲100％。我希望我的頁腳始終位於底部，這樣我的頁面的其餘部分就可以延伸到完整的窗口。我怎麼做？

下面是代碼：

html { 
    font-size: 62.5%; 
    min-width: 100%; 
    width: 100%; 
    max-width: 100%; 
    min-height: 100%; 
    height: 100%; 
    max-height: 100%; 
} 

body { 
    font-size: 1.5em; 
    line-height: 1.6; 
    font-weight: 400; 
    font-family: 'Lato', sans-serif; 
    color: #FFD6ED; 
    background-color: #1D003E; 
    min-width: 100%; 
    width: 100%; 
    max-width: 100%; 
    min-height: 100%; 
    height: 100%; 
    max-height: 100%; 
}

HTML是非常標準：

<html> 

<body> 
    <header> 
     <div class="container"> 
      <div class="rows"> 
       <div class="twelve columns"> 
        Content 
       </div> 
      </div> 
     </div> 
    </header> 
</body> 

</html>

這一切都不是工作。我也嘗試設置高度：100vh，但是再次沒有運氣。我在這裏閱讀了很多主題，所有發佈的解決方案都沒有改變。

來源

2016-11-10 grhu

當我加入下列：體{ 頂部：0; bottom：0; left：0; right：0; 身高：500em; } 一個滑塊出現了，我可以滾動頁面，但仍然不是整頁。 – grhu

有無數的方法來實現這一點。以下是Flexbox的操作方法。谷歌爲「粘腳」尋找更多。

body { 
 
    margin: 0; 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 
main { 
 
    flex: 1; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" /> 
 

 
<body> 
 
    <main class="container"> 
 
    <header> 
 
     <div class="rows"> 
 
     <div class="twelve columns"> 
 
      Content 
 
     </div> 
 
     </div> 
 
    </header> 
 
    </main> 
 
    <footer> 
 
    <div class="container"> 
 
     Hello there! 
 
    </div> 
 
    </footer> 
 
</body>

來源

2016-11-10 23:14:45

我已經使用了不同的方法，最後它的工作原理如下： html，body { height：100vh; } body { font-family：'Lato'，sans-serif;最小高度：100％; } 但仍然感謝您的回答。 – grhu

高度不能在身體骨架上工作

回答

相關問題