Question

我正在尝试创建一个页脚固定在底部的模板。我已经成功尝试了不同的方法，但现在我发现无法在100％高度扩展辅助内容div。我尝试了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>

Answer 1

编辑：

重试：

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

Answer 2

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>

我认为这就是你想要的。

Answer 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>

内容100％，页脚固定在底部

3 个答案: