CSS плавающие бок о бок divs высота 100%

Question

Я не знаю, как спросить это без картинки. У меня есть два div рядом, внутри другого div с отступами и полями как таковыми. Вот чего я ХОЧУ достичь:

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   +-----------------------------------------------------------+   |        |
|                                                                   |        |
+-------------------------------------------------------------------+--------+

но вот что я получаю. Я могу плавать в div и компенсировать поля и т. Д., Но я не могу заставить div C распространяться на всю высоту A. Ни A, ни B не имеют фиксированной высоты, так как мне заставить C распространяться на полная высота А?

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   +--------+
|   |                                                           |            |
|   |                                                           |            |
|   |                                                           |            |
|   +-----------------------------------------------------------+            |
|                                                                            |
+----------------------------------------------------------------------------+

Высота A растягивается на высоту B. Это тоже полностью изменчивая компоновка, поэтому ширина также не фиксирована. По сути, мне нужен C, чтобы увеличить всю высоту A.

Я пытался поиграть со всеми высотами, но не могу заставить его работать, потому что высоты не зафиксированы: (

A - это просто оболочка div в принципе, без отступов, без полей. B на самом деле состоит из двух div с полем и отступом, float: left; C - только один div, float: right;

EDIT: Мне также нужно поддерживать IE, без CSS хаков

Answer 1

Как насчет создания C position: absolute; right: 0; вместо плавающего? Вот так: http://jsfiddle.net/JMC_Creative/2gr3T/1/

#a { overflow:auto;
position: relative;
}

#b {height: 200px;
    width: 200px;
    margin: 50px;
    float: left;
}

#c { height: 100%;
    position: absolute;
    right: 0;
    width: 40px;
}

Answer 2

Лучший и самый простой способ, который я знаю, это добавить overflow:hidden к #A и дать #C значение padding-bottom:999em; margin-bottom:-999em;

Это работает даже в IE5!

Answer 3

Не думаю, что это решит проблему, но может помочь.

Всякий раз, когда у меня возникают проблемы с поплавками и высотой, я помещаю overflow: auto на родительский элемент. Я нашел эту технику на причудливом режиме.

http://www.quirksmode.org/css/clearing.html

Answer 4

Вот сумасшедшая идея, и мне пришлось бы проработать CSS, но что, если ...

A, содержащий B и CC, абсолютно позиционирован по отношению к правому, верхнему и нижнему A, имеющему право-отступ или поле шириной C

Answer 5

В сети написано много о равных высотах столбцов CSS. Решение, которое я обычно использую, состоит в том, чтобы использовать jQuery для вычисления максимальной высоты всех столбцов, а затем использовать jQuery для установки высоты всех столбцов на одно и то же. Обычно я делаю это вручную, но есть некоторые плагины, которые выполняют эту задачу.

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

Answer 6

Вот фрагмент из моей личной библиотеки, который может помочь вам, также, посмотрите этот вопрос и этот более конкретный javascript решение .

Некоторые примечания:

• По умолчанию эти значения являются абсолютными для <body> элементов, , если
• Вы не установите родительский элемент positionатрибут relative или absolute, в противном случае элемент будет абсолютным по отношению к <body> или ближайшему элементу с position регистрациями.

---

/* 
Name: Absolute 100% Height
Author: DSKVR 2010 
Website: http://dskvry.com
*/

body *.full-height, 
body *.full-height-left, 
body *.full-height-left, 
body *.full-height-width {
    position:absolute;
    height:auto;
    margin:0;
}

body *.full-height {
 top:0;
 bottom:0;
}

body *.full-height-left {
    top:0;
    bottom:0;
    left:0;
}

body *.full-height-right {
    top:0;
    right:0;
    bottom:0;
}

body *.full-area {
    top:0;
    left:0;
    right:0;
    bottom:0;
}

---