内容 100%，底部固定页脚答案

【问题标题】：content 100% with footer fixed at bottom内容 100%，底部固定页脚
【发布时间】：2012-11-07 12:25:36
【问题描述】：

我正在尝试创建一个底部固定有页脚的模板。我已经成功地尝试了不同的方法，但现在我发现无法将二级内容 div 扩展到 100% 高度。我尝试过 Ryan Fait、David Walsh 并搜索其他方法。我知道这是一个常见问题，但在 stackoverflow 中我还没有看到解决方案。

您可以在此处查看示例：http://jsfiddle.net/charlyta/hyfUe/

    * {
        margin: 0;
        padding: 0;
        }

    body, html {
        height: 100%;
        }

    #container {
        background: #f00; /* styling only */
        width: 100%;
        margin: 0 auto;
        position: relative;
        height: auto !important;
        min-height: 100%;
        height: 100%;



        }

    #content {
        padding-bottom: 100px;
        width: 980px;
        background-color: #FFF;
        margin: 0 auto;
        min-height: 100%;
        margin-top: -20px;
        -webkit-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44);
        -moz-box-shadow:    0px 1px 3px rgba(27, 57, 50, 0.44);
        box-shadow:         0px 1px 3px rgba(27, 57, 50, 0.44);
        -moz-border-radius: 5px;
        border-radius: 5px;
        position: relative;
         max-height:100%;
        height:auto !important;
         height: 100%;
        overflow: hidden;

        }

    #footer {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
        background: #0f0;
        }

        #header {

        height: 100px;
        width: 100%;
        background: #0f0;
        }

</style>

<div id="container">
<div id="header">
header
</div>
    <div id="content">
        Your content goes here
    </div>
    <div id="footer">
        Footer here
    </div>        
</div>
 </body>

【问题讨论】：

您是要创建列还是行？
不，我不是要创建列或行，只是一个 100% 高度的 div：内容
您希望 div 自动调整到内容的高度？对吗？
[stackoverflow.com/questions/4884636/… [1]: stackoverflow.com/questions/4884636/…
不确定这是否是您所追求的，但我会尝试一下-通过将透明背景应用于#content并将您想在#content上看到的背景设置为#容器

标签： css

【解决方案1】：

css 的一些变化

* {
    margin: 0;
    padding: 0;
    }

#container {
    background: #f00; /* styling only */
    display:block;
    margin: 0 auto;
    min-height: 100%;
    }

#content {
    padding-bottom: 100px;
    width: 980px;
    background-color: #FFF;
    margin: 0 auto;
    min-height: 100%;
    margin-top: -20px;
    -webkit-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44);
    -moz-box-shadow:    0px 1px 3px rgba(27, 57, 50, 0.44);
    box-shadow:         0px 1px 3px rgba(27, 57, 50, 0.44);
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
     max-height:100%;
    height:auto !important;
     height: 100%;
    overflow: hidden;
    }

#footer {
    display:block;
    position: fixed; /* here is where the magic happens =D */
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: #0f0;
    }

    #header {

    height: 100px;
    width: 100%;
    background: #0f0;
    }

如果你想将页脚固定在底部，页脚不能在任何容器内，所以你的 html 应该是这样的：

<div id="container">
    <div id="header">
    header
    </div>

    <div id="content">
        Your content goes here
    </div>
</div>

<div id="footer">
    Footer here
</div>

我想这就是你想要的。

【讨论】：

【解决方案2】：

编辑：

重试：

http://jsfiddle.net/hyfUe/12/

    #container {
        background: #f00; /* styling only */
        width: 100%;
        margin: 0 auto;
        /*position: relative;*/
        /*height: auto !important;*/
        /*min-height: 100%;*/
        height: calc(100% - 120px); /* MAGIC */
    }

    #content {
        border: 3px dashed silver; /* DEBUG */
        padding-bottom: 100px;
        width: 980px;
        background-color: #FFF;
        /*margin: 0 auto; /* REMOVED */
        /*min-height: 100%; /* REMOVED */
        margin-top: -20px;
        margin-bottom: 100px;
        -webkit-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44);
        -moz-box-shadow:    0px 1px 3px rgba(27, 57, 50, 0.44);
        box-shadow:         0px 1px 3px rgba(27, 57, 50, 0.44);
        -moz-border-radius: 5px;
        border-radius: 5px;
        display: block;
        height: calc(100% - 170px) !important; /* MAGIC */
        }

    #footer {
        opacity: 0.5; /* DEBUG */
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
        background: #0f0;
        }

【讨论】：

是的，我已经尝试过了，但您可以看到 div 溢出底部。这是主要问题，如果我把溢出：隐藏我的设计被削减
不客气。如果有帮助，请不要忘记接受答案:)
好的！ :) 只是一个问题，如果我将内容的上边距与标题重叠可能会出现问题？
你试过了吗？ :) 顺便说一句，我的代码是为了回答你的问题，但我认为按照其他答案的建议将页脚和页眉放在容器外是一种更好的做法。

【解决方案3】：

.container-for-fix-footer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
footer {
  height: 50px;
  flex-shrink: 0; /* this is what does the trick */
  background-color: black;
}
main {
  flex: 1 0 auto;
}

<div class="container-for-fix-footer">
  header
  <main class="content">
  content
  </main>
  <footer>FOOTER</footer>
</div>

【讨论】：