Question

我在创建一个停留在页面底部的静态页脚时遇到了问题。我尝试过实现粘性页脚，但是当我尝试它时，没有明显的区别。目前，页脚与页面一起滚动。我不知道是不是因为我的HTML或其他CSS设置，或者我不知道的事情。

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

BitmapData#hitTest

GettingStarted.html：

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

更新

我更改了<html> <head>  <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>  <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>  <div class="footer"> <div class="siteContent" style="padding-top:10px;"> <div style="width:42%; float:left; margin-left: 15px;"> <span style="font-size:75%;">©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>  <a href="mailto:WSAHelp@moodys.com?Subject=Question" target="_top">me@you.com</a><br> <span class="glyphicon glyphicon-phone-alt"></span>  Americas    +x.xxx.xxx.xxxx<br> <span class="glyphicon glyphicon-phone-alt"></span>  EMEA    +xx.xx.xxxx.xxxx </div> <div style="width:22%; float:left; margin-left: 10px;"> <br> <span class="glyphicon glyphicon-phone-alt"></span>  Asia    +xxx-xxxx-xxxx<br> <span class="glyphicon glyphicon-phone-alt"></span>  Japan    +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;，它似乎解决了这个特定页面上的问题。

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

Answer 1

您可以从位置修改页脚样式：固定到位置：相对。它将解决您的问题，只需增加填充就可以感觉良好。

Answer 2

如果我理解你想要的东西（一个停留在短页底部但随之长大的页脚），你可以使用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/

Answer 3

尝试使用

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

并在.wrapper中使用min-height

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

3 个答案: