CSS佈局：在頁腳底部或頁面的末尾（如果進一步下跌）

-2

我知道，這樣的問題已經被問了很多，但不知何故，正確的答案總是躲避我......CSS佈局：在頁腳底部或頁面的末尾（如果進一步下跌）

好吧，我已經得到了兩件我想要的東西：

頁腳始終位於頁面底部，無論內容的高度低於可用屏幕還是更多。
頁腳上面的內容應該充滿屏幕的其餘部分 - 或使用更多的空間，如果需要的話

，第一部分是很容易的，例如，here，像這樣的東西...

.footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}

那裏沒問題。但是，如何獲取.footer元素上方的內容以填充剩餘空間？ height=100%;顯然不起作用;

任何人有一個想法如何實現與佈局...

固定頭
在屏幕底部的腳註（或以下，如果內容需要更多的高度比）
，填補了可用的屏幕或使用更多，如果需要的話

A的含量（其原因是，在最後，我想和高度靈活的網格填充屏幕中的內容）

來源

2017-01-23 Florian Schaetz

你檢查了這個[問題]（http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web -頁）？ –

謝謝。我寧願更老的瀏覽器兼容的東西，但也許它將不得不做。 –

header { 
 
    width: 100%; 
 
    position: fixed; 
 
    background-color: #9f0d0d; 
 
    color: #f5f5f5; 
 
    border-bottom: 1px solid #ddd; 
 
    min-height: 5%; 
 
} 
 

 
    header :first-child { 
 
     vertical-align: middle; 
 
     margin-top: auto; 
 
     margin-bottom: auto; 
 
    } 
 

 
article { 
 
    top: 55px; 
 
    width: 100%; 
 
    height: 90%; 
 
    position: fixed; 
 
} 
 

 
footer { 
 
    top: 95%; 
 
    min-height: 5%; 
 
    width: 100%; 
 
    position: fixed; 
 
    padding: 10px 15px; 
 
    background-color: #9f0d0d; 
 
    color: #f5f5f5; 
 
    border-top: 1px solid #ddd; 
 
}

<div> 
 
    <header>HEADER</header> 
 
    <article>CONTENT</article> 
 
    <footer>FOOTER</footer> 
 
</div>

隨時與此代碼塊的發揮。

來源

2017-01-23 13:25:02 jmag

CSS佈局：在頁腳底部或頁面的末尾（如果進一步下跌）

回答

相關問題