Проблема с высотой CSS Floated Div, нет простого решения?

У меня проблема с CSS, которую я не могу решить.

Я сделал небольшую диаграмму.

Допустим, высота розового и зеленого прямоугольника определяется его содержимым. Розовая коробка иногда могла быть меньше.

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

У кого-нибудь есть решения?

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

100% высота для розового и зеленого полей не будет работать, потому что внешний div не имеет фиксированной высоты.

Стол подойдет, но давай, стол?

Я мог бы имитировать фон и левую-правую границу на розовом и зеленом прямоугольниках, поместив их на внешний фон div. Но это кажется беспорядочным.

На данный момент у меня есть js-решение, но должно быть более простое.

Ваше здоровье.


html css overflow css-float
person MintDeparture    schedule 10.02.2010    source источник
comment
Нет, вы перечислили наиболее популярные методы для этого (искусственные столбцы, javascript) alistapart.com/articles / fauxcolumns Определенно нет способа сделать это с помощью div в css.   -  person davidosomething    schedule 10.02.2010
comment
Приветствую вас за ответы. Я собираюсь использовать свое собственное решение js / jquery с css в качестве резервной копии, но не обеспечивающим 100% желаемого вида. Я отправлю его, когда он будет закончен и будет интенсивно использоваться.   -  person MintDeparture    schedule 11.02.2010

Ответы (5)


arrow_upward
3
arrow_downward

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

person Mathias Bynens    schedule 10.02.2010
comment
+1 За ответ. Поддельные столбцы - допустимое решение, и если файл сохраняется как 8-битный PNG, размер файла обычно составляет около 1 или 2 КБ. - person Doug Neiner; 10.02.2010
comment
… Или даже меньше. В большинстве случаев, когда я использовал эту технику, мне удавалось использовать повторяющиеся фоновые изображения высотой 1 пиксель. В зависимости от ситуации размер файла может составлять всего несколько сотен байт. - person Mathias Bynens; 10.02.2010

arrow_upward
4
arrow_downward

Помимо Javascript / Jquery или таблиц, единственное, что я могу придумать, - это решение на основе display: table-cell (объяснение здесь) - но это тоже не будет работать в IE, и нет особой разницы в использовании таблицы сразу, не так ли?

Я бы сказал, что это один из редких случаев, когда из-за отстойных спецификаций и / или реализаций CSS невозможно обойтись без стола.

Изменить: как указали другие респонденты, существуют обходные пути CSS («ложные столбцы»), которые будут работать в большинстве случаев. Использование «таблиц CSS» (с использованием свойств display: table) я пока не считаю подходящими решениями, поскольку они не поддерживаются IE6, браузером, который все еще занимает значительную долю рынка.

person Pekka    schedule 10.02.2010
comment
OHMYWORDTABLES :) На самом деле, я все еще думаю, что Faux Columns - правильный ответ. Таблицы на самом деле не являются механизмом компоновки. С помощью Faux Columns вы всегда можете отключить фоновое изображение и изменить макет в CSS. В случае таблиц вам необходимо отредактировать таблицу, чтобы изменить макет. Всего два цента. - person Doug Neiner; 10.02.2010
comment
Таблицы CSS являются механизмом макета и не требуют элементов таблицы HTML. Когда для макета используются таблицы CSS, больше нет необходимости редактировать HTML, чем когда используется какой-либо другой вид макета CSS (т.е. вам, вероятно, придется что-то настроить для любого значительного изменения). - person Quentin; 10.02.2010
comment
@Doug true, но не всегда работает (когда вам нужно, чтобы столбцы физически имели одинаковую высоту, например, при размещении чего-либо внутри столбца). Искусственные колонны - это нормально. решение, если они работают для вашей ситуации (и я совершенно доволен, если они являются решениями проблемы OP), но все же это огромный недостаток CSS, который я считаю ужасным, что он не решен в той или иной форме. - person Pekka; 10.02.2010
comment
@David, не могли бы вы показать мне решение только для CSS, которое достигает того, чего хочет OP, с элементами физически растягивающимися до одинаковой высоты, которое работает в IE и без JavaScript? - person Pekka; 10.02.2010
comment
Я действительно не могу понять, почему ужасные хаки CSS хороши, а таблицы неприемлемы. - person Matteo Riva; 10.02.2010
comment
@Pekka Почему ты спрашиваешь именно меня об этом? - person Quentin; 10.02.2010
comment
Таблицы @kemp HTML описывают семантику. Если такой семантики на самом деле не существует, это ложь. Врать не хорошо. Ни искусственные столбцы, ни таблицы CSS не являются ужасными хитростями. - person Quentin; 10.02.2010
comment
Семантика @David или нет, таблицы работают, CSS - нет. Иногда вам просто нужно выбрать меньшее зло, то есть то, что выполняет вашу работу. Фальшивые столбцы - это хитрость, поскольку они создают только впечатление столбцов одинаковой высоты, на самом деле они не растягиваются так, как вы хотите. Не уверен, что вы имеете в виду под таблицами CSS, надеюсь, вы не имеете в виду display: table-cell по очевидным причинам. - person Matteo Riva; 10.02.2010
comment
@kemp CSS делает. Когда дело доходит до макета, главное - впечатление, ну и что? Ответ подсказал display: table-cell. Он отлично работает, если вы не возражаете, что для пользователей IE7 и ниже все будет изящно ухудшаться. IE8 прекрасно это поддерживает. - person Quentin; 10.02.2010
comment
Если впечатление - это все, что имеет значение, тогда вы можете использовать таблицу :) Я не против унизить пользователей IE6 / 7. Хотел бы я отказаться от них, но те, кто платит, не согласны. - person Matteo Riva; 10.02.2010
comment
При хорошей разметке, разложенной с помощью различных методов CSS, впечатление, производимое пользователем программы чтения с экрана (например), остается довольно постоянным. Начните использовать HTML-таблицы, и это не так. - person Quentin; 10.02.2010
comment
Это интересно, я никогда не читал ничего конкретного о программах чтения с экрана, не понимающих таблиц. У вас есть ссылка? - person Matteo Riva; 10.02.2010
comment
@David, я спрашивал вас конкретно, потому что вы говорили, что это можно сделать на чистом CSS. Предлагаемые вами решения хороши, но пока IE 6 все еще существует и имеет долю рынка, ни один здравомыслящий оператор веб-сайта, ориентированный на конечного пользователя, не может игнорировать, они пока не подходят. Пока это не так, я с удовольствием буду использовать таблицы в этих крайних случаях. - person Pekka; 10.02.2010
comment
@kemp Они понимают таблицы. Они также понимают, что таблицы описывают отношения между битами данных и могут выражать эти отношения способом, подходящим для навигации по аудио. - person Quentin; 10.02.2010
comment
@Mathias, прочтите обсуждение полностью. Искусственные колонки - это хорошо, но не решение в любой ситуации. - person Pekka; 10.02.2010
comment
@Pekka: Да, но, очевидно, «то, что хочет OP» !== «элементы, физически растянутые до одинаковой высоты» в данном случае. На диаграмме, предоставленной OP, он не упоминает, что хочет разместить элемент внутри одного из блоков. - person Mathias Bynens; 10.02.2010
comment
@Mathias Да, и поэтому я сказал выше, что если Faux Columns решают это для OP, это совершенно нормально. Однако в подобном вопросе следует упомянуть об альтернативах, если кто-то столкнется с этим, кому нужна физическая растяжка. - person Pekka; 10.02.2010
comment
@Pekka Dude ... извини, если я вызвал эту потрясающую бурю комментариев. Вы поднимаете очень верный момент в отношении позиционирования элементов в столбце, однако даже при использовании ложных столбцов, если вы устанавливаете контейнер на position:relative, но не на отдельные столбцы, вы все равно можете размещать элементы в нижней части ложного столбца. Однако наступает момент, когда наиболее прагматично нужно использовать таблицу. Я не знаю, виноват ли это CSS, это только IE6 + IE7 :) - person Doug Neiner; 10.02.2010
comment
@ Дуг, без проблем, я думаю, это была отличная дискуссия! position: relative не будет работать во всех случаях, потому что вы можете позиционировать объекты относительно контейнера (= таблицы, если хотите), но не отдельных столбцов. Это создает проблемы, если ширина столбцов неизвестна. Однако это очень и очень редкие крайние случаи. Что ж, нам просто нужно подождать, пока IE6 не выйдет из строя, и проблема решится сама собой, и мы все будем использовать таблицы CSS :) - person Pekka; 10.02.2010
comment
@Pekka Я думал, что если вы используете Faux Columns, вы знаете ширину столбца (либо ширину в пикселях, либо в процентах), поэтому было бы относительно (без каламбура) легко установить левое или правое значение. - person Doug Neiner; 10.02.2010
comment
@ Дуг хороший замечание. Или, иначе говоря, вы абсолютно правы;) - person Pekka; 10.02.2010
comment
@Doug, ну, мои взгляды не статичны, у меня нет проблем с исправлением. Конечно, при условии, что исправление встроено в мои основные убеждения в чистоте кода. Я склонен блокировать сложные подходы, когда доступно более простое решение. Иногда невозможно предотвратить появление table-row (т.е. строки поверх таблиц). В конце концов, мы все ищем простые решения, чтобы еда была на нашем столе. Ладно, хватит плохих каламбуров :) - person Pekka; 10.02.2010

arrow_upward
2
arrow_downward

Это то же самое, что и та же проблема столбцов высоты, см. Это сообщение в блоге для решения.

person Lazarus    schedule 10.02.2010
comment
Что ж, читать статью о том, что в заголовке нет хаков, весьма сомнительно. - person Matteo Riva; 10.02.2010

arrow_upward
0
arrow_downward

как насчет этого:

.green {
  display:block;
  float: left;
  background: green;
  width: 200px;
  height: 200px;
  position: relative;
}

.outer {
  position: relative;
  background: yellow;
  overflow: auto;
}

.pink {
  left: 250px;
  background: red;
  height: 100%;
  width: 100px;
  position: absolute;
}

Должно работать .. может я поменял цвета, розовая коробка с растущей! ;)

edit ну ладно, я пропустил плавающий на втором поле. Если это необходимо, то, как упоминалось выше, я думаю, что искусственные столбцы - хороший метод.

person xijo    schedule 10.02.2010

arrow_upward
0
arrow_downward

Как насчет компромисса?

Если искусственные столбцы не могут вам помочь, вы не хотите использовать таблицы и у вас уже есть решение для javascript, я бы просто использовал css (display: table, display: table-cell) и поместил javascript в условные комментарии для IE6 и IE7.

Затем вы можете легко удалить javascript, когда придет время, а пока современные браузеры не должны его запускать.

person jeroen    schedule 10.02.2010