我需要帮助来尝试将此页脚设置在固定位置。我正在学习并尝试制作合理的流动布局。这是一项正在进行的工作，但在我将页脚放在正确的位置之前我无法继续。
我的问题是它一直延伸到右边的窗口之外。有时它会创建一个滚动条并且不遵循边距规则。我已经尝试了几乎所有我能想到的以及我可以通过使用可信赖的谷歌找到的东西。我已经使用了最新的 chrome 和 firefox 版本来查看它是否是 chrome 的问题。
我曾经有一个包装容器，但我已经将其移除并将页脚代码从一个地方移动到另一个地方，试图为它找到一个可以正常运行的地方。
<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
text-align: center;
margin-top: 0;
background-color: #1A1A1A;
background-image: url('#');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;}
#logo {
background-color: rgba(53, 53, 53, 0.9);
padding: 10px;
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: 5px;
height: 90px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-ms-border-bottom-left-radius: 5px;
-ms-border-bottom-right-radius: 5px;
-o-border-bottom-left-radius: 5px;
-o-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;}
#nav {
background-color: rgba(53, 53, 53, 0.9);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-msborder-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 0px;
position: relative;
margin-right: 0;
margin-left: 0;}
ul {
list-style: none;
margin: 0;
display: inline-block;
position: relative;}
li {
display: inline-block;
position: relative;}
a {
display: inline-block;
text-decoration: none;
height: 100px;
width: 100px;
position: relative;
text-align: center;}
#link1:hover {
background-color: #727272;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}
#link1:active {
background-color: #ba6a15;}
#link2:hover {
background-color: #727272;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}
#link2:active {
background-color: #ba6a15;}
#link3:hover {
background-color: #727272;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}
#link3:active {
background-color: #ba6a15;}
#link4:hover {
background-color: #727272;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}
#link4:active {
background-color: #ba6a15;}
#footer {
background-color: rgba(53, 53, 53, 0.9);
position: fixed;
bottom: 0;
width: 100%;
height: 22px;
padding: 3px;
color: #FFF;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div id="logo"><img src="#" alt="logo"></div>
<nav>
<ul>
<li id="link1"><a href="#"><img src="#" alt=""; height="100"; width="100"></a></li>
<li id="link2"><a href="#"><img src="#" alt=""; height="100"; width="100"></a></li>
<li id="link3"><a href="#"><img src="#" alt=""; height="100"; width="100"></a></li>
<li id="link4"><a href="#"><img src="#" alt=""; height="100"; width="100"></a></li>
</ul>
</nav>
</header>
<footer>Hello there!</footer>
</body></code></pre>
</div>
</div>
最佳答案
您可以通过将 margin:0px; 设置为 body 并将 box-sizing: border-box; 设置为 footer 来实现
JSFiddle - DEMO
body {
text-align: center;
background-color: #1A1A1A;
background-image: url('#');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin:0px;
}
#footer {
background-color: rgba(53, 53, 53, 0.9);
position: fixed;
bottom: 0;
width: 100%;
height: 22px;
padding: 3px;
color: #FFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
关于html - 100% 宽度的固定位置页脚从窗口向右延伸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25984173/