Question

我正在为一个俱乐部创建网站，需要帮助修复页脚。

footer {
  width: 100%;
  background: #222;
  margin: 0 auto;
}

.footer-section {
  float: left;
  width: 33%;
  background: #222;
  color: white;
}

<footer>
  <div class="footer-section">Contact us at : 1015 7th street NW <br>
  </div>
  <div class="footer-section">Hey how you doing</div>
  <div class="footer-section">This weezy F baby</div>
</footer>

我希望页脚能显示整个浏览器屏幕，但右侧的一小部分被忽略了，并显示了我的背景。我觉得这是因为当三列显示1％时，在宽度上使用33％。无论如何，有没有解决这个问题并保持响应速度

Answer 1

尝试 宽度：calc（100％/ 3）;

而不是 宽度：33％；

Answer 2

您可以使用网格布局来创建完美的1/3。

display:grid;
grid-template-columns: 1fr 1fr 1fr;

body{
  margin:0
}

footer {
  box-sizing: border-box;
  width: 100%;
  background: #222;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.footer-section {
  color: white;
}

<footer>
  <div class="footer-section">Contact us at : 1015 7th street NW <br>
  </div>
  <div class="footer-section">Hey how you doing</div>
  <div class="footer-section">This weezy F baby</div>
</footer>

Answer 3

添加以下内容将启用完整宽度的页脚。

* {
  margin:0;
}
.footer-section {
  width:33.33%;
}

https://jsfiddle.net/r1ev5tjg/

编辑：

如果您想建立一个完全响应的网站，最好考虑使用媒体查询。这样，您就可以根据屏幕尺寸设置每列的宽度（例如，在移动屏幕上使每列全宽）。

Answer 4

看看这个：https://www.w3schools.com/howto/howto_css_three_columns.asp

.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>

Answer 5

使用以下命令修改CSS CSS：-

* {
      margin:0;
    }

    footer {
      width: 100%;
      background: #222;
      margin: 0 auto;
    }

    .footer-section {
      float: left;
      width: 33.33%;
      background: #222;
      color: white;
    }

Answer 6

使用vw =视图宽度来设置元素的宽度。 100vw是视图宽度的100％，即窗口大小。

.footer {
  width: 100vw;
}

如何使页脚宽度达到全屏

6 个答案: