如何使用Flex垂直居中和視口單位vh？

我有一個簡單的頁面佈局，使用flex的垂直居中的內容框。如何使用Flex垂直居中和視口單位vh？

我使用min-height: 70vh;來拉伸容器高度以允許內容框垂直居中。

我還有一個頁腳，使用flex: 1;將高度差拉伸到頁面底部。

問題

如果內容框有足夠的內容，使得它比頁腳不推到了底部，並滾動與頁的頁高。例如：height: 2000px;

如果我刪除min-height: 70vh;頁腳被推到頁面的底部，因爲它看起來應該。

HTML/CSS

<!DOCTYPE html> 
<html> 
     <head> 
      <style> 
      html, body { 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
      body { 
        display: flex; 
        flex-direction: column; 
      } 
      .header { 
        min-height: 40px; 
        padding: 0.8em 2em; 
        background: black; 
        color: white; 
      } 
      .flex-container { 
        display: flex; 
        align-items: center; 
        min-height: 70vh; 
        padding: 2em; 
        background: gray; 
      } 
      .content-box { 
        width: 300px; 
        height: 300px; 
        margin: auto; 
        padding: 2em; 
        text-align: center; 
        background: black; 
        color: white; 
      } 
      .footer { 
        z-index: 100; 
        position: relative; 
        flex: 1; 
        padding: 2em; 
        background: black; 
        color: white; 
      }  
      </style> 
     </head> 

     <body> 
      <div class="header"> 
        Header 
      </div> 

      <div class="flex-container"> 
        <div class="content-box"> 
         Content Box 
        </div> 
      </div> 

      <div class="footer"> 
        Footer 
      </div> 

     </body> 
</html>

來源

2017-02-25 Matt McManis

SOLUTION - JSFIDDLE

添加flex: 0 0 auto;到容器

.flex-container { 
    display: flex; 
    align-items: center; 
    min-height: 70vh; 
    padding: 2em; 
    background: gray; 
    flex: 0 0 auto; /* Added rule */ 
}

我希望解決問題。

來源

2017-02-25 06:01:54

現在它工作得很好！ –

如何使用Flex垂直居中和視口單位vh？

回答

相關問題