100% ширины, не охватывающей всю ширину браузера в webkit - PullRequest
Новая
       19

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

15 голосов
/ 12 июля 2011

Мне трудно из-за того, что я думал, было бы просто мертвой проблемой.

Я пытаюсь создать div, который занимает 100% ширины окна браузера.DIV заполнен несколькими дочерними DIV, которые расширяются, чтобы заполнить все пространство чередующимися цветами, как футбольное поле.Эти элементы будут расширены, чтобы соответствовать всей ширине заданного пространства, которое имеет отдельные полосы 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>

Ответы [ 8 ]

8 голосов
/ 11 сентября 2013

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

4 голосов
/ 12 июля 2011

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

html, body
{
    width: 100%;
}

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

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

html { overflow-y: scroll; }

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

3 голосов
/ 19 августа 2013

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

body
{
background-color:#dddddd;
width:100%;
margin:0px;
}
2 голосов
/ 30 июня 2014

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

2 голосов
/ 31 декабря 2011

Я исправил с помощью 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;
}
1 голос
/ 06 декабря 2011

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

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

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

0 голосов
/ 21 мая 2013

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

0 голосов
/ 09 декабря 2012

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

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