CSS页脚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%; 
    ... 
} 

基本上具有这两个propoerties同一元件上设置由视口的宽度100％在任一侧加 5个像素（100 ％+ 10px）。额外的10px使滚动条出现。

Answer 2

只需将你的填充从页脚中取出即可。因为你有它的绝对定位，并设置为100％的宽度，它添加填充时强制滚动条。

https://jsfiddle.net/t2zya13k/

#footer { 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    /*padding:5px;*/ 
    width: 100%; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 

Answer 3

解决此问题的一种方法是将页脚的box-sizing属性设置为border-box。这样做将包括总大小中的5px填充;否则总宽度将为填充的100％加2×5px。

https://jsfiddle.net/bbhr1j38/1/

#footer { 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    padding:5px; 
    width: 100%; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    box-sizing:border-box; 
} 

Answer 4

一个发生了许多HTML网页开发人员的重复问题，是填补实际的行为。

边距：它在元素的宽度之外。

填充：它在元素内部，并且它与元素宽度相加。

因此，100％的宽度+ 5px左侧和+ 5px右侧将导致元素的宽度大于100％。

所以为了避免造成的混乱上填充的行为方式，以下属性引入

box-sizing:border-box; 

上述属性表示该衬垫是100％的宽度的一部分。它不会导致元素超过100％。

此属性已成为所有响应框架的基本组成部分，为开发人员提供一个非常清晰的想法，同时处理其百分比的网格元素。

*{ 
 
    box-sizing:border-box; 
 
} 
 
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; 
 
}

<title> 
 

 
    Homepage</title> 
 
<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>