如何在 CSS 中创建静态页脚？答案

【问题标题】：How to create a static footer in CSS?如何在 CSS 中创建静态页脚？
【发布时间】：2016-12-03 06:06:01
【问题描述】：

我无法创建停留在页面底部的静态页脚。我试过实现粘页脚，但是当我尝试它时，没有明显的区别。目前，页脚与页面一起滚动。我不知道是因为我的 HTML 或其他 CSS 设置，还是我不知道的原因。

这是我的代码和滚动页脚的示例：https://codepen.io/bobblyhead/pen/yJEdzj

html, body{
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    margin-bottom: 100px;
    clear: both;
    position: relative;
}

.footer{
    position: fixed;
    margin-bottom: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #212121; 
    padding: 10px; 
    color: white;
    font-size: .81em;
}
footer div:first-child{
    margin-bottom: 5px;
}
footer .glyphicon{
    margin-right: 5px;
}
footer a:link, footer a:visited, footer a:hover, footer a:active{
    color: white;
}
footer .contacts{
    text-align: left;
}

GettingStarted.html：

<html>
<head>
    <!--[if lt IE 9]>
      <script src="dist/html5shiv.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="login.css">
    <link rel="stylesheet" href="header.css">
    <link rel="stylesheet" href="footer.css">

    <script src="https://use.fontawesome.com/fae6c977ea.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

</head>
<body>
<!--Content-->
<div class = "wrapper">
    <div class="container">
    <h1> Getting Started </h1>
    </div>
    <div class=container>
        <div id="sysReq"><h3> System Requirements </h3>
            <div class= "col-md-12">
                <p> This is a paragraph about system requirements.</p>
            </div>
        </div>
        <div id="install"><h3> Installation </h3>
            <div class= "col-md-12">
                <p> This is a paragraph about installation.</p>
            </div>
        </div>
        <div id="sandbox"><h3> Try it now - API Sandbox </h3>           
            <div class= "col-md-12">
                <p> SANDBOX! </p>
            </div>
        </div>
    </div>
</div>




<!-- FOOTER -->
    <div class="footer">
        <div class="siteContent" style="padding-top:10px;">

            <div style="width:42%; float:left; margin-left: 15px;">
                <span style="font-size:75%;">&copy;Copyright 2016.</span>
                <span style="font-size:75%;">Test.</span>
                <br>
            </div>

            <div style="width:22%; float:left; margin-left: 10px;">
                <span class="glyphicon glyphicon-envelope"></span>&nbsp;&nbsp;<a href="mailto:WSAHelp@moodys.com?Subject=Question" target="_top">me@you.com</a><br>
                <span class="glyphicon glyphicon-phone-alt"></span>&nbsp;&nbsp;Americas&nbsp;&nbsp;&nbsp;&nbsp;+x.xxx.xxx.xxxx<br>
                <span class="glyphicon glyphicon-phone-alt"></span>&nbsp;&nbsp;EMEA&nbsp;&nbsp;&nbsp;&nbsp;+xx.xx.xxxx.xxxx
            </div>

            <div style="width:22%; float:left; margin-left: 10px;">
                <br>
                <span class="glyphicon glyphicon-phone-alt"></span>&nbsp;&nbsp;Asia&nbsp;&nbsp;&nbsp;&nbsp;+xxx-xxxx-xxxx<br>
                <span class="glyphicon glyphicon-phone-alt"></span>&nbsp;&nbsp;Japan&nbsp;&nbsp;&nbsp;&nbsp;+xx-x-xxxx-xxxx
            </div>
        </div>
    </div>

    <div class="modal fade" id="selectModal" tabindex="-1" role="dialog" aria-labelledby="Select Columns" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"></div></div></div>
    <div class="modal fade" id="pdfmodal" tabindex="-1" role="dialog"><div class="modal-dialog"><div class="modal-content"></div></div></div>
    <div id="username" class="hidden"></div>

    </div> 

</body>
</html>

更新：

我更改了position: absolute;，并设置了margin-bottom: -140px;，它似乎解决了这个特定页面上的问题。

但是，在内容较少的页面上，页脚和底部之间有一个空格。好像是this

【问题讨论】：

如果<footer> 元素具有fixed 定位，是否将html 和body 定位从relative 更改为static 帮助？
@NateWhittaker 我试过了，似乎没有任何改变。
如果你用谷歌搜索这个问题，有数百个有效答案。

标签： html css twitter-bootstrap footer

【解决方案1】：

尝试使用

.footer {
position:absolute; 
bottom:0px;
}

并在 .wrapper 中使用最小高度

【讨论】：

谢谢！它不会随页面滚动，但它会覆盖一些内容并且不会停留在最底部。 i.gyazo.com/15fd41c7497109f3ccb73aaa7f83a5da.png
如果您还可以在包装器中显示min-height 以使此答案完整，那将非常有用。

【解决方案2】：

您可以将页脚样式从 position:fixed 修改为 position:relative。它会解决你的问题，只是增加填充感觉很好。

【讨论】：

【解决方案3】：

如果我明白你想要什么（留在短页面底部的页脚，但会随之增长），你可以使用 flexbox 来做到这一点：

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}

<div class="page">
  <header class="site-header"></header>

  <main class="site-content"></main>

  <footer class="site-footer"></footer>
</div>

这里有更多解决方案（法语）：https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/

【讨论】：