Как получить ширину нижнего колонтитула, чтобы достичь полного экрана

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>

Я хочу, чтобы мой нижний колонтитул достиг полного экрана браузера, но крошечная его часть справа пропущена и показывает мой фон.Я чувствую это потому, что при использовании ширины 33%, когда есть три столбца, отображается 1%.Есть ли в любом случае, чтобы исправить это и сохранить его отзывчивым

Answer 1

изменить CSS с помощью CSS: -

* {
      margin:0;
    }

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

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

Answer 2

Посмотрите на это: 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 3

Добавление следующего позволит включить нижний колонтитул полной ширины.

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

https://jsfiddle.net/r1ev5tjg/

Редактировать:

Лучше всего использовать медиазапросы, если выВы хотите создать полностью адаптивный сайт.Таким образом, вы можете установить ширину каждого столбца в зависимости от размера экрана (например, сделать ширину каждого столбца полной на мобильных экранах).

Answer 4

Вы можете использовать макет сетки для создания идеального 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 5

Попробуйте width: calc (100% / 3);

вместо width: 33%;

Answer 6

используйте vw = ширина представления, чтобы установить ширину элементов.100vw - это 100% ширины просмотра, то есть размер окна.

.footer {
  width: 100vw;
}