flexbox高度或大圖像背景

我其實很喜歡這種方法，這是大img背景，但我希望它與windows的高度一樣流暢（在我們向下滾動到其他部分或div之前），因此在到達移動屏幕之前，它的高度可以隨時伸展和填充整個瀏覽器屏幕，而標誌&裏面的內容總是在中間flexbox高度或大圖像背景

我喜歡這個網站，http://peterfinlan.com/，我通過電子郵件詢問，但從來沒有獲得有關如何使它任何迴應，我嘗試遵循其CSS，但我只是不能讓我的標題作爲它的，我真的沒有看到除div.hero內容之外的任何其他flexbox css，是的，我是新來的flexbox，它有JavaScript或什麼？

你能幫助我嗎？

來源

2015-05-30 user2163348

您能否更具體地瞭解所需的行爲，並提供標記和CSS樣本以瞭解您到目前爲止所做的嘗試。 – Cu3PO42

爲了讓一個div使用Flex框中填寫該網站，你需要做到以下幾點：

<body> 
    <div id="mainWrapper"> 
     <div id="headerWrapper"> 
     <!-- HEADER CONTENT HERE --> 
     </div> 
    </div> 
</body>

與下面的CSS

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

#mainWrapper { 
    display: flex; 
    flex-direction: column; 
    min-height: 100%; 
} 

#headerWrapper { 
    flex: 1; 
}

見行動here一個例子。

但是，在這種特定環境下，您不一定需要flexbox，因爲#mainWrapper已經延伸到整個站點。
雖然flexbox很好，但不要僅僅因爲它是新的而強制使用它。擺脫flexbox和#headerWrapper在這裏不會有任何傷害。

請注意，我沒有在此處包含任何供應商前綴，因此它可能不適用於所有瀏覽器。我建議你在部署CSS之前使用像autoprefixer這樣的工具。

來源

2015-05-30 15:07:35 Cu3PO42

感謝上帝帶你到這裏！我做到了！這就是爲什麼我無法使其全屏（我的頁眉或第一個div在頁面中），我從來沒有想過我需要設置HTML和身體的寬度和高度 – user2163348

flexbox高度或大圖像背景

回答

相關問題