100% ширины divs не охватывают всю ширину браузера в webkit

Мне сложно с тем, что, по моему мнению, было бы простой проблемой.

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

Кажется, что это прекрасно работает в Firefox, но в Safari (и в Chrome) расчет кажется слишком строгим и оставляет лишнее оставшееся пространство на самом правом div.

Есть ли способ избежать этого оставшегося пространства? Я столкнулся с одной и той же проблемой в Safari и Chrome даже при размещении в фиксированной ширине div... всегда справа остается справа. Интересно, я просто прошу сделать слишком много математики?

Вот код, который я использую, с альтернативными версиями, разделяющими пространство на разделы 5% и подразделения 1%. Извините, это длинный и избыточный код.

<html>
<head>

<style type="text/css">
<!--

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.clearfix {
    visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}    

#field {
    width: 100%;
    background: #009900;
    height: 100px;
    margin: 0;
    margin-bottom: 25px;
    padding: 0;
}    

.singleyard {
    width: 1%;
    float: left;
    margin: 0;
    padding: 0;
    background: #009900;
}    

.fiveyards {
    width: 5%;
    float: left;
    margin: 0;
    padding: 0;
}

.alt {
    background: rgba(0,0,0,0.25);
}

.oneyard {
    width: 20%;
    float: left;
    margin: 0;
    padding: 0;
}

-->
</style>

</head>

<body>


<div id="field">
  <div class="fiveyards">5</div>
  <div class="fiveyards alt">10</div>

  <div class="fiveyards">15</div>
  <div class="fiveyards alt">20</div>

  <div class="fiveyards">25</div>
  <div class="fiveyards alt">30</div>

  <div class="fiveyards">35</div>
  <div class="fiveyards alt">40</div>

  <div class="fiveyards">45</div>
  <div class="fiveyards alt">50</div>

  <div class="fiveyards">55</div>
  <div class="fiveyards alt">60</div>

  <div class="fiveyards">65</div>
  <div class="fiveyards alt">70</div>

  <div class="fiveyards">75</div>
  <div class="fiveyards alt">80</div>

  <div class="fiveyards">85</div>
  <div class="fiveyards alt">90</div>

  <div class="fiveyards">95</div>
  <div class="fiveyards alt">100</div>

</div>


<div id="field">
<!--below section is repeated 10 times -->
<div class="singleyard">1</div>
<div class="singleyard">2</div>
<div class="singleyard">3</div>
<div class="singleyard">4</div>
<div class="singleyard">5</div>
<div class="singleyard">6</div>
<div class="singleyard">7</div>
<div class="singleyard">8</div>
<div class="singleyard">9</div>
<div class="singleyard alt">10</div>
<!--end repeated section-->

</div>    
</body>
</html>

Ответ 1

У меня была та же проблема, вот что я обнаружил: где-то в вашем CSS у вас есть еще один div, который имеет ширину 100% и ALSO имеет отступы. Поскольку значение дополнения добавляется к ширине, значение этого div становится больше 100%. Решение состоит в том, чтобы не использовать прописку на любом div, установленном на 100% ширину. Если вам нужно заполнить, попробуйте добавить дополнение к элементу внутри div.

Ответ 2

Единственное, что я могу придумать, это добавить:

html, body
{
    width: 100%;
}

Чтобы убедиться, что сафари знает, что родительский контейнер поля также 100%;

Еще одна вещь, которую нужно попробовать добавить:

html { overflow-y: scroll; }

Это должно заставить боковую полосу прокрутки, даже если она неактивна. Интересно, может ли какой-то рендеринг веб-кадры временно мигать полосой прокрутки, но не возвращает пространство назад. Любая из этих работ?

Ответ 3

Я исправил с помощью display: table-cell

#field {
    width: 100%;
    background: #009900;
    height: 100px;
    margin: 0;
    margin-bottom: 25px;
    padding: 0;
    display: table;
}    

.singleyard {
    width: 1%;
    margin: 0;
    padding: 0;
    background: #090;
    display: table-cell;
}

.fiveyards {
    width: 5%;
    margin: 0;
    padding: 0;
    display: table-cell;
}

Ответ 4

Я исправил мой

body
{
background-color:#dddddd;
width:100%;
margin:0px;
}

Ответ 5

Из моего опыта по аналогичной проблеме. Когда ваш код не будет растягивать весь путь на мобильном устройстве (но будет на рабочем столе), фиксация его - это вопрос нахождения некоторого элемента, который невидимо нажимает границу. Должен быть какой-то предмет, который выходит из его границы - для меня это был образ логотипа, который торчал около 20px вне заголовка div. Вы можете найти это, отдав все границы или устранив одну вещь за раз. После того, как вы его нашли, вы можете переместить его или удалить, чтобы позволить вещам снова растянуться.

Ответ 6

Я исправил мой, добавив

html, body
{
  width: 100%;
  margin: 0px;
}

счастливое кодирование!!!

Ответ 7

Заметил, что на это не ответил. У меня была такая же проблема. Я добавил следующие строки в мой класс CSS:

margin-right:-10px;
margin-left:-10px;

Ответ 8

добавление min-width: 100% похоже на трюк