如何用flexbox佈局隱藏我的粘腳？

我想實現一個簡單的佈局使用CSS柔性盒，但我卡住了。如何用flexbox佈局隱藏我的粘腳？

這裏就是我試圖做（原諒我的油漆技能）：

基本上我試圖讓頁腳堅持視口的底部和主要內容容器填充剩餘的空間。如果視口太小，則頁腳一定不可見，但可通過向下滾動頁面來訪問。

這裏是我的代碼（不工作打算）：

<body> 
    <div class='layout-wrapper> 
     <div class='layout-main'> 
      <div class='content'>Content</div> 
     </div> 
     <footer>Footer</footer> 
    </div> 
</body> 

.layout-wrapper { 
    display: flex; 
    flex-direction: column; 
} 

.layout-main { 
    flex-grow: 1; 
}

這使得頁腳粘在底部，如果視口夠大，但如果視口太小，它是layout-main div縮小（如果我在該div上放置overflow: hidden，則隱藏內容）而不是僅留在內容下的頁腳。

有沒有辦法做我想用CSS做的事情？我可以使用JavaScript，但我寧願去完整的CSS解決方案。

來源

2016-08-15 Telz

所以，你要'主要內容container'內'content'和頁腳外？ –

是的這就對了 – Telz

您應該在layout-wrapper和flex: 1上main content container上使用height: 100vh。

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.layout-wrapper { 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
footer { 
 
    border: 2px solid red; 
 
} 
 
.layout-main { 
 
    flex: 1; 
 
    border: 2px solid blue; 
 
} 
 
.content { 
 
    border: 2px solid orange; 
 
    color: orange; 
 
}

<div class='layout-wrapper'> 
 
    <div class='layout-main'> 
 
    <div class='content'>Content</div> 
 
    </div> 
 
    <footer>Footer</footer> 
 
</div>

來源

2016-08-15 18:15:21

工程就像一個魅力，謝謝！ – Telz

有沒有辦法讓內部div（內容）的「height：100％'匹配容器的高度（layout-main）？我試着把'position：absolute'和'top：0; bottom0;'放在一起，但是這使得頁腳覆蓋了viewport太小的'layout-main'。我試着在容器和內容上放置一個clearfix，但是這並沒有改變任何東西。 – Telz

試試這個https://jsfiddle.net/Lg0wyt9u/1132/ –

如何用flexbox佈局隱藏我的粘腳？

回答

相關問題