0
ページの下部にある静的フッターを作成できません。私は固定フッタを実装しようとしましたが、試してみると目に見える違いはありません。現在、フッターはページと共にスクロールしています。私はそれが私のHTML、または他のCSSの設定、または私がただ気づいていないもののためかどうかわかりません。ここで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%;">©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:[email protected]?Subject=Question" target="_top">[email protected]</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>
はUPDATE：
私はposition: absolute;を変更し、設定しますmargin-bottom: -140px;、この特定のページで問題を解決しているようです。
ただし、コンテンツの少ないページでは、フッターとボトムの間にスペースがあります。それは私が何をしたい理解していればthis
要素が 'fixed'ポジショニングの場合、' html'と 'body'測位を' relative'から 'static'ヘルプに変更しますか？ –
@NateWhittaker私はそれを試したが、何も変わっていないようだ。 –
この質問をGoogleに送信すると、何百もの有効な回答があります。 – Martin