блочная верстка вопрос по закрашиванию ячейки целиком

M
На сайте с 20.08.2004
Offline
368
391

https://jsfiddle.net/bd5brxso/

Почему-то для меня большим камнем на путик освоению блочной верстки стоял всегда этот момент. Не стоит обращать внимание на то что в примере выше используется бутстрап и пример не большой. На каждом сайте где есть левая и правая часть (меню, и текст, к примеру) это встречается.

Проблема в том , что если левая часть больше правой, то правая закрашивается не доконца, на оборот так же верно...

Как раз и навсегда понять решение этой проблемы и забить жирный гвоздь на моем непонимании..

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

Спасибо.

отец сыночка, лапочки дочки и еще одного сыночка
tommy-gung
На сайте с 22.11.2006
Offline
277
#1

можно использовать flex, можно использовать эмуляцию таблицы display: table, table-row, table-cell, которую поддерживает даже ie8

Здесь не могла быть ваша реклама
D
На сайте с 14.01.2007
Offline
153
#2

Miracle, правую и левую часть обернуть в див. диву фиксированную высоту, частям высоту в 100%

barabash
На сайте с 30.04.2011
Offline
71
#3
Miracle:
https://jsfiddle.net/bd5brxso/

Почему-то для меня большим камнем на путик освоению блочной верстки стоял всегда этот момент. Не стоит обращать внимание на то что в примере выше используется бутстрап и пример не большой. На каждом сайте где есть левая и правая часть (меню, и текст, к примеру) это встречается.

Проблема в том , что если левая часть больше правой, то правая закрашивается не доконца, на оборот так же верно...

Как раз и навсегда понять решение этой проблемы и забить жирный гвоздь на моем непонимании..

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

Спасибо.

Зависит от ситуации, я обычно использую min-height для div

M
На сайте с 20.08.2004
Offline
368
#4

Друзья, спасибо за ответы. Все пробовал кроме flex, хотя когда-то и о нем читал.

Не получилось у меня ни с обертыванием ни с min-height (хотя не совсем понимаю как последнее может помочь, я делал max-heignt)

D
На сайте с 14.01.2007
Offline
153
#5

пример с обёрткой: https://jsfiddle.net/bd5brxso/2/

tommy-gung
На сайте с 22.11.2006
Offline
277
#6
Dinozavr:
пример с обёрткой: https://jsfiddle.net/bd5brxso/2/

только тут фикс высота, что чаще неудобно использовать

M
На сайте с 20.08.2004
Offline
368
#7
Dinozavr:
пример с обёрткой: https://jsfiddle.net/bd5brxso/2/

если бы высота была фиксированная я бы не спрашивал. тут и обертки не надо было бы.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий