Вопросы Теги

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

Мне трудно решить то, что, как я думал, будет совершенно простой проблемой.

Я пытаюсь создать 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>
15
задан Zach Saucier 3 January 2015 в 21:39
поделиться