粘性底部和高度为100％的内容

Question

我希望有一个页面，它拥有固定页脚，同时滚动条不会覆盖页眉，只遮挡正文。就像我在这里演示的那样。但现在我想让内容（虚线框）的高度达到正文的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>

层叠样式表

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;
    }

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

- user3714967

Answer 1

您可以这样设置.my_content的高度，使其为视口高度减去页面中其他元素的高度和（纵向）填充（即标题高度、页脚高度、.content-container的顶部和底部填充）的总和：

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

演示

如果您的页眉和页脚高度不固定，则此方法将不起作用。

- Jayx

Answer 2

使用此示例来创建粘性页脚，它不会重叠在页眉上方。

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

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

我可以对HTML进行一些更改

- RAJ

---

滚动条出现时位于页脚下方 - user3714967

不，我不想要固定的页脚。我希望页脚像我的fiddle一样。我只想让内容的高度与页面的高度保持一致。 - user3714967

是的，虽然这个答案提供了一个将页脚固定在视口底部的解决方案，但它并没有处理内容需要100%高度的要求。 - Luke