html - CSS Footer 100% 宽度添加滚动条

Question

本页页脚:https://jsfiddle.net/strathaxxs/bbhr1j38/不起作用，我已经尝试了很多东西，请帮助我。这是代码:

    <title>Homepage</title>
  <style>
  html {
    height: 100%;
        margin: 0;
    padding: 0;
}
body {
    font-family: Roboto;
min-height: 100%;
margin: 0; 
padding: 0;
font-family: sans-serif;
}
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
  </style>


<div id="header">
<h1>bla bla bla </h1>
</div>

<div id="nav">
bla <br>
bla bla <br>
bla 
</div>

<div id="section">
<h2>bla bla </h2>
<p>bla bla bla bla bla bla bla bla bla </p>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</div>

<div id="footer">
Copyright &copy; StratHaxxs.org
</div>

它所做的只是添加一个滚动条。自从我开始制作网站以来，我一直遇到这个问题

Answer 1

试试这个:

#footer {
    ...
    padding:5px 0; /* Remove the horizontal padding, keep the vertical padding */
    width: 100%;
    ...
}

基本上，在同一个元素上设置这两个属性会使视口(viewport)的宽度为 100% 加上 两侧各 5 像素 (100% + 10px)。额外的 10px 使滚动条出现。