HTML/CSS: столбцы компоновки не заполняют пробел

Question

Я пытаюсь создать раскладку из трех столбцов, но, как вы можете видеть из скриншота ниже, самые левые и самые правые столбцы не охватывают весь путь вниз :

Вы можете найти код на http://codepen.io/vbelenky/pen/hvbEq, и я собираюсь вставить его здесь, тоже:

<div class="wrapper"> 

    <div class="primary"> 
     <div class="primary-left"> 
      Primary Left<br> 
      blah 
     </div> 
     <div class="primary-right"> 
      Primary Right 
     </div> 
    </div> 

    <div class="secondary"> 
     Secondary 
    </div> 

</div> 

CSS:

.wrapper { 
    overflow: hidden; 
    width: 600px; 
    border: 1px solid black; 
} 

.secondary { 
    width: 200px; 
    float: left; 
    background: cyan; 
} 

.primary { 
    width: 400px; 
    float: right; 
} 

.primary-left { 
    width: 300px; 
    float: left; 
    background: grey; 
} 

.primary-right { 
    width: 100px; 
    float: right; 
    background: yellow; 
} 

Answer 1

Мой Коллега дал решение. Основная идея - не использовать свойство float и использовать таблицу отображения и таблицу-ячейку. Пожалуйста, обратитесь к the code для справки. Мне пришлось переместить div.secondary в начало, я прокомментировал атрибут float всюду, я объявил div.wrapper как display: table и div.secondary, div.primary-left и div.primary-right как отображение: стол-клетки.

Answer 2

Как monkhan сказал, вам необходимо установить высоту для всех элементов, например (see on CodePen):

.wrapper { 
    overflow: hidden; 
    width: 600px; 
    border: 1px solid black; 
    height: 40px; 
} 

.secondary { 
    width: 200px; 
    float: left; 
    background: cyan; 
    height: inherit; 
} 

.primary { 
    width: 400px; 
    float: right; 
    height: inherit; 
} 

.primary-left { 
    width: 300px; 
    float: left; 
    background: grey; 
    height: inherit; 
} 

.primary-right { 
    width: 100px; 
    float: right; 
    background: yellow; 
    height: inherit; 
} 

Недостатком этого подхода является то, что вам нужно знать, что максимальная высота (в данном случае я выбрал 40px).

Answer 3

Один из способов приблизиться к этому с абсолютными позициями (вместо поплавков). Он не подходит ко всем потребностям, но он может поместиться. http://codepen.io/anon/pen/lLngy

.wrapper { 
    overflow: hidden; 
    width: 600px; 
    border: 1px solid black; 
    position: absolute; top: 0; left: 0; bottom: 0; 
} 

.secondary { 
    width: 200px; 
    background: cyan; 
    position: absolute; top: 0; bottom: 0; 
} 

.primary-left { 
    width: 300px; 
    background: grey; 
    position: absolute; top: 0; left: 200px; bottom: 0; 
} 

.primary-right { 
    width: 100px; 
    background: yellow; 
    position: absolute; top: 0; right: 0; bottom: 0; 
} 

Answer 4

HTML: Использование следовать код, который похож на ваш запрос:

<div class="mainDiv"> 
     <div class="left">Left</div> 
     <div class="center">Center</br>Center<br/>Center<br/></div> 
     <div class="right">Right</div> 
    </div> 

CSS:

.mainDiv{ position: relative; height: auto;} 
.left{ position: absolute;background:red; left: 0; top: 0; width: 100px; height: 100% } 
.right{ position: absolute;background:blue; right: 0; top: 0; width: 100px;height: 100%; } 
.center{ margin: 0 100px;background:green; } 

http://jsfiddle.net/pfqpR/

Answer 5

Один подход, который не потребует вы должны установить любой p переопределенная высота должна заключаться в применении 3-цветного фонового изображения к обертке (высота изображения может быть 50 пикселей и «повторить-y»).

Таким образом, вы будете иметь цвета фона внутренних divs, повторяющихся до самого низа, и не имеет значения, какой внутренний div является самым высоким.

Например:

.wrapper { 
    overflow: hidden; 
    width: 600px; 
    border: 1px solid black; 
    background-image: url('3colours.png'); 
    background-repeat: repeat-y; 
} 

Answer 6

Другие хорошо сказал. Я просто показываю еще один возможный способ (неудобно). Неудобно, потому что это затрудняет изменение ширины. Просто фоновая картинка. Используйте фоновое изображение (ширина обертки x 1) px для .wrapper с цветами в соответствующих положениях. Также удалите стили цвета фона с .secondary, .primary-right и .primary-left.

Вот скрипка: http://jsfiddle.net/eY9VR/