CSS Floated Div высота вопроса, нет простого решения? - PullRequest
Новая
       6

CSS Floated Div высота вопроса, нет простого решения?

5 голосов
/ 10 февраля 2010

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

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

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

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

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

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

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

Стол будет работать, но давай, стол?

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

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

Приветствие.

Ответы [ 5 ]

4 голосов
/ 10 февраля 2010

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

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

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

3 голосов
/ 10 февраля 2010

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

2 голосов
/ 10 февраля 2010

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

0 голосов
/ 10 февраля 2010

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

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

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

0 голосов
/ 10 февраля 2010

что по этому поводу: 

.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 ну ладно, я пропустил плавающий на втором поле. Если это необходимо, то, как я уже говорил, искусственные столбцы - это хорошая техника, я думаю.

...