Flexbox，最小高度和IE11

我試圖用flexbox做一個簡單的設計，但是我遇到了IE11的麻煩。基本上，我想要一個只有在內容不夠高時纔會貼到底部的頁腳。我沒有問題，這樣做與瀏覽器這樣的：Flexbox，最小高度和IE11

*, 
 
*:after, 
 
*:before { 
 
    box-sizing: border-box; 
 
} 
 

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

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
main { 
 
    flex: 1; 
 
}

<header> 
 
    Header 
 
</header> 
 
<main> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
</main> 
 
<footer> 
 
    Footer 
 
</footer>

與<p>main</p>數量打球只是爲了看到IE11錯誤的行爲。

有沒有一種方法來實現這個沒有JavaScript？

來源

2017-06-22 ssougnez

不工作。在這種情況下，「Footer」直接出現在「Main」頂部的「Header」下方。 – ssougnez

啊是的，你可以改變你的flex：1 flex-grow：1並且應該可以工作 – Pete

IE瀏覽器有一個min-height錯誤和柔性列容器家長需要display: flex，在這種情況下，html

Fiddle demo

更新你的CSS這樣

*, 
 
*:after, 
 
*:before { 
 
    box-sizing: border-box; 
 
} 
 
html, body { 
 
    margin: 0; 
 
    display: flex; 
 
} 
 
body { 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
} 
 
main { 
 
    flex-grow: 1; 
 
}

<header> 
 
    Header 
 
</header> 
 
<main> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
</main> 
 
<footer> 
 
    Footer 
 
</footer>

來源

2017-06-22 13:00:57 LGSon

它很好用，謝謝 – ssougnez

在這種情況下，min-height錯誤不是問題。但'flex-grow：1'這樣做是因爲當你移除flex：1時，它將'flex-basis'重置爲'auto'默認值。 –

@Michael_B我認爲剛剛出來的一個人，在你的回答發表評論之後，再次感謝 – LGSon

在main，而不是flex: 1使用flex: auto。這應該是你需要的一切。

的flex: 1速記規則分解爲：

flex-grow: 1
flex-shrink: 1
flex-basis: 0

的flex: auto速記規則分解爲：

flex-grow: 1
flex-shrink: 1
flex-basis: auto

IE具有麻煩解析flex-basis: 0。

的更多信息：

flex property not working in IE

來源

2017-06-22 13:04:33

This works too .. + 1。但是，默認爲「0 1 auto」時，'flex：auto'如何變成'1 1 auto'？ – LGSon

@LGSon，https：//www.w3。org/TR/css-flexbox-1 /＃flex-common –

啊哈，謝謝......以前真的錯過了，以爲它只是改變了flex的基礎（我屬於老一代，我們不讀手冊:) – LGSon

Flexbox，最小高度和IE11

回答

相關問題