粘性页脚和 100% 高度的内容

Question

我想要一个带有粘性页脚的页面，它的滚动条不与页眉重叠，仅与正文重叠。就像我在 this fiddle 中所做的那样。但现在我希望内容（虚线框）的主体高度为 100%。

html

<div class="navbar navbar-inverse navbar-fixed-top"></div>
<div class="container">
   <div class="content-container">
      <div class="my_content">Full height ??</div>
      <div class="push"></div>
   </div>
   <div class="footer"></div>
</div>

css

html,
    body {
        height: 100%;
        overflow: hidden;
    }

    body {
        padding-top: 50px;
    }

    .container {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
    }

    .content-container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        padding-top: 15px;
        padding-bottom: 15px;
        min-height: 100%;
        margin-bottom: -60px;
    }

    .footer {
        position: relative;
        width: 100%;
        background-color: red;
    }

    .footer,
    .push {
        height: 60px;
    }

    .my_content {
        border: 1px dotted;
        width: 100%;
        height: 100%;
        min-height: 200px;
        min-width: 300px;
    }

您可以建议使用粘性页脚的任何其他模板。

Answer 1

将此示例用于不与页眉重叠的粘性页脚

http://jsfiddle.net/0dbg9ko2/12/

.footer {
position: fixed;
bottom:0;
left:0;
background-color: red;
}

我可以在 html

中进行一些更改

Answer 2

您可以将 .my_content 设置为视口高度的 100% 减去其他元素的高度和（垂直）填充（即 .content-container 上的页眉高度、页脚高度、顶部和底部填充） ) 在你的页面上像这样：

.my_content {
  min-height: calc(100vh - 140px);
}

DEMO

如果您的页眉和页脚具有可变高度，这将不起作用。

粘性页脚和 100% 高度的内容

Sticky footer and content with 100% height

html

css

sticky-footer