Flexbox的粘頁腳和溢出的內容區域

如所看到的here，我試圖重新創建一個粘腳的解決方案 - 沒有設置高度。Flexbox的粘頁腳和溢出的內容區域

我以相同的方式創建了該網站，但看起來內容在頁腳上溢出，頁腳簡單地是靜態的（不太粘！）顯然，這個flexbox設置限制了'中段'擴展超出「允許」大小（=窗口 - 頁眉 - 頁腳），並且不會調整大小以適應內容並壓下頁腳。

enter image description here

我試圖改變不同的設置，溢出的一切，我試圖改變中間部分的元素和中段本身的顯示選項。我找不到問題！

現在我意識到如果我只是定義了頁腳的高度，我可以解決這一百種不同的方法。但我試圖不去。

下面是一些簡單的HTML，以顯示我的結構

<body class="Site"> 
<header><div id="header>...</div></header> 
<div id="mid" class="Site-content"> 
    <div id="links" class="fadein"> 
     <ul><li>..</li></ul> 
    </div> 
    <div id="content" class="content fadein"> 
    text text text 
    </div> 

</div> 
<footer> 
    <div id="footer"></div> 
</footer> 
</body>

和相關CSS

div#header { 
    position:relative; 
    display:block; 
    top:0px; 
    left:0px; 
    margin:0 auto 5px auto; 
    width:auto; 
} 
div#mid { 
    display:block; 
    width:100%; 
    height:auto; 
    position: relative; 
    background:#C69; 
} 
     div#content { 
      margin-left:120px; 
      width:720px; 
      padding: 25px; 
      background:#0F9; 
     } 

     div#links { 
      position:absolute; 
      left:0px; 
      top:0px; 
      width:100px; 
      padding: 5px; 
      margin-left:10px; 
      margin-top:35px; 
      background:#0C6; 
     } 
.Site { 
    min-height: 100%; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
} 

.Site-content { 
    flex: 1; 
    -webkit-box-flex: 1; 
    -webkit-flex: 1; 
    -moz-box-flex: 1; 
    -ms-flex: 1; 
} 
footer { 
    clear:both; 
    width:auto; 
    padding:10px; 
}

你巧妙的解決方案，將不勝感激！

來源

2013-12-10 toms

與Philip Walton的flexbox sticky footer相反，您並未使用min-height：100vh;'min-height：100％;'。也許這是問題？ – kleinfreund

檢查此鏈接http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/以查看如何使用flexbox實現粘性頁腳。

而且我個人使用的技術是http://www.joshrcook.com/a-responsive-sticky-footer/，它不使用flexbox。

<body> 
    <div class="container"> 
     <!-- content here --> 

    <footer> 
     <!-- content for footer --> 
    </footer> 
    </div> 
</body>

而對於CSS是非常簡單的

html, 
body { 
    height: 100%; 
} 
.container { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
footer { 
    display: table-row; 
    height: 1px; 
}

希望這有助於。

來源

2013-12-10 12:55:05 Bobby

雖然我沒有在我的代碼中找到使用彈性盒的錯誤，但這確實證明是一個具有相同最終結果的優秀解決方案！謝謝你，幹得好！ – toms

Flexbox的粘頁腳和溢出的內容區域

回答

相關問題