全高內容塊寬度粘性頁腳

Question

問題是微不足道的（我確信必須有很多解決方案，但我自己（誠實地）找不到合適的人）

我需要像這樣的簡單頁眉->內容->頁腳頁面

<div class="container">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

標頭頁腳在底部不固定的位置（不是固定位置，如果底部沒有內容，則底部存在），它必須根據內容塊的高度移動。

我嘗試過的

頁眉和頁腳絕對具有top和bottom屬性，內容的頂部和底部填充與頁眉和頁腳高度相同，但按我的方式不能正常工作。

jsfiddle示例： https ://jsfiddle.net/xwjhn7ej/

Answer 1

您是如此接近...只需要更改height的值，您需要設置min-height ：

.container {
     min-height: 100%;

更新小提琴

---

獎勵 ：

要使所有內容保持可見，可以在容器=上使用頁腳和頁眉的高度的padding ：

    .container {
        min-height: 100%;
        background:red;
        width:1280px;
        margin:0 auto;
        position: relative;

        /*Use box-sizing to include the values of the padding on the 100% min-height*/
        box-sizing:border-box;
        /*Padding for bottom and top = to the height of your elements footer-header*/
        padding: 135px 0;
    }

第二演示小提琴

Answer 2

根據您的小提琴，您可以嘗試以下操作：

.container {
    /* height: 100%; - remove this*/
    min-height: 100vh;

   ...
}

然后根據頁眉和頁腳的高度在內容的頂部和底部添加適當的填充。

Answer 3

.container {
  min-height: 100%;
}
.content {
  padding-top: 135px; // height of the header
  padding-bottom: 135px; // height of the footer
}

JSFiddle