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

从页脚上取下你的填充物。因为它具有绝对定位并设置为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 2

试试这个：

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

基本上将这两个propoerties设置在同一元素上使得视口的宽度100％加上两侧的像素（100％+ 10px）。额外的10px使滚动条显示出来。

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 Web开发人员遇到的一个重复问题是填充的实际行为。

保证金：它超出了元素的宽度。

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

因此，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>

CSS页脚100％宽度添加滚动条

4 个答案: