Жидкое расположение CSS и Границы

См. эту статью.

В основном, в "традиционной" модели фрагмента CSS, ширина коробчатой секции только указывает ширину содержания поля, исключая его границу (и дополняющий).

В CSS3 можно переключиться на другую модель поля следующим образом:

box-sizing: border-box;

Определенные для браузера реализации этого:

-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8

Это заставит размеры поля включать границу и дополнение элемента. Таким образом, можно теперь указать

.box { 
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   width:20%;
   border:1px solid red;
   float:left
}

и сделайте, чтобы эти пять отделений подняли всю ширину содержания элемента без обертывания.

Обратите внимание, что это не поддерживается более старыми браузерами. Для них необходимо будет перенести каждое поле во второе поле согласно другим ответам на этой странице.

Только помещенный width: 100% на наиболее удаленном отделении, и не помещают границу на него. Если Вы сделаете это, то внутренние поля заполнят пространство (предполагающий, что Вы не пустили в ход их или что-либо), так как они - элементы блока, и Вы не должны будете волноваться о границах, добавляющих к общему размеру.

При реальной необходимости в появлении вложенных границ пяти твердых единственных пикселей можно сделать что-то вроде этого (с правильно семантическими именами, надо надеяться):

<div class="one">
    <div class="two">
        <div class="three">
        etc.
        </div>
    </div>
</div>

<style>
.one {
    width: 100%;
}
.two {
    border: 1px solid red;
    padding: 1px;
    background: red;
}
.three {
    border: 1px solid red;
    background: white;
}
</style>

Как Вы видите, можно фальсифицировать второе дополнение использования границы, и цвета фона на втором отделении (мог бы даже сократить общее количество отделений путем выполнения этого; просто помните, что Вы не можете заполнить outmost отделение, не завинчивая Вашу ширину).

Это получит Вас довольно близко, но не 100% пути (предназначенная игра слов). Для предоставления элемента 100% высотой, это должно знать "100% какой?". Все родительские элементы должны также быть даны 100% высотой, и это включает тело. Или как W3C выразился: "Если высота содержания блока не указана явно (т.е. это зависит от высоты содержания), и этот элемент не абсолютно расположен, значение вычисляет к 'автоматическому'". Поскольку Вы видите, что мы также должны дать тело "положение: абсолютный"; чтобы высоту соблюдали. Этот пример также делит ширину на пять равных столбцов с границами (и некоторое дополнение и поле только для забавы):

<style>
body {
width: 100%;
height: 100%;
margin: 0;
position: absolute; 
/* overflow: hidden; */
}
div.section {
float: left;
width: 19.95%;
height: 100%;
}
    div.column {
    height: 100%;
    border: 1px solid blue;
    margin: 1em;
    padding: 2em;
    }
</style>

<div class="section"><div class="column">one</div></div>
<div class="section"><div class="column">two</div></div>
<div class="section"><div class="column">three</div></div>
<div class="section"><div class="column">four</div></div>
<div class="section"><div class="column">five</div></div>

Поскольку Вы видите при тестировании его, у нас нет проблемы с witdh. Это вызвано тем, что "разделы", которые делят ширину, не имеют никакого дополнения, поля или границ. Таким образом ширина, которую мы устанавливаем, будет шириной, которую они занимают на экране. Теперь, это не строго верно на практике. Я на самом деле установил ширины 19,95% а не ожидаемые 20%. Проблема состоит в том, что некоторые браузеры (IE для одного) имеют погрешность округления когда сложение процентов и чем больше подразделений для складывания, тем больше ошибка.

То, где этот метод, очевидно, перестал работать, когда дело доходит до высоты. В отличие от "ширины: автоматический"; который заставит отделение занять доступное горизонтальное место, "высота: автоматический"; только сделает отделение столь же высоким как его содержание. Необходимо указать "высоту: 100%"; чтобы заставить отделение заполнять высоту окна, но увы, при добавлении поля, дополнении и границ, представленная высота отделения становится больше, чем область просмотра, приводящая к вертикальной полосе прокрутки.

Здесь я могу только действительно видеть два варианта; Любой 1) признайте, что отделения не вполне заполняют высоту окна и устанавливают их высоту на, возможно, 80% или 2) Пропуск нижняя граница и набор тело для "переполнения: скрытый"; который обрежет от частей отделений, которые высовываются вне края окна.

Наконец, конечно, Вы могли также использовать некоторые простые сценарии для достижения того, что Вы после. Не должно быть очень сложным вообще - но это - вопрос с другим тегом... Счастливое кодирование!