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

Я не знаю, как спросить об этом без картинки. У меня есть два div, бок о бок, внутри другого div с отступом и полями как таковыми. Это то, чего я хочу достичь:css плавающий бок о бок divs высота 100%

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

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

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

высота растягивается по высоте B. Это компоновка полностью жидкости тоже, так что ширина не фиксируется ни. В принципе, мне нужно C продлить на всю высоту А.

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

А . просто ДИВ обертку в принципе, ни отступов, не окраина B не на самом деле состоят из двух див с полем и отступами, поплавком: левое, C только один DIV, поплавок: право;

EDIT: I необходимо также поддерживать IE, БЕЗ CSS-хаков

источник

2011-01-05 sethvargo

Да. проблема в том, что div C плавает, поэтому на самом деле это не ребенок A (тот же B). height применяется к родительскому, а C фактически не имеет родителя размером до – sethvargo

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

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

источник

2011-01-05 20:22:46 mpdonadio

Мне пришлось использовать jQuery. Я решил, что это невозможно в IE6 без использования JS, и мне разрешено требовать, чтобы браузер поддерживал JS. – sethvargo

Использование jQuery для решения проблем IE6 - это мой выбор инструментов за последние два года или около того, вместо того, чтобы ударить головой по CSS-хакам/обходным методам (даже с условными таблицами стилей). Тем не менее, я не знаю, как должен выглядеть ваш макет, но подделка высоты фоновых изображений в родительском контейнере может быть очень удобной и часто является очень простым решением (когда она будет работать). – mpdonadio

Я не могу этого сделать, потому что ширина также является жидкостью – sethvargo

Как сделать 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; 
}

источник

2011-01-05 20:06:49 JakeParis

. Это отлично работает! Если я не пытаюсь поддерживать интернет-проводник, которым я являюсь. В IE6 C прикреплен справа от PAGE, а не A. Да, я знаю, что IE отстой, и я презираю его поддерживать, но для этого проекта мне нужно. – sethvargo

Если C_has_ находится вне A, то я бы предложил перейти к javasript для решения. – JakeParis

IE6 должен правильно это понимать, когда родительский статус: относительный ... или я слишком пьян. – kapa

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

А содержит В и С С абсолютно позиционирован против правых А, в сверху и снизу а имел правый отступы или поля, как широкий, как C

источник

2011-01-05 20:07:03 n8wrl

Это действительно работает, я использую этот метод в своих веб-приложениях регулярно. Однако это имеет недостатки, особенно если вы не хотите переполнения. – Sandwich

Это НЕ работает в IE6. он прикрепляет C к правой стороне страницы, а не A – sethvargo

** # A ** должен иметь 'position: relative' или' position: absolute', в противном случае он будет абсолютным для элемента ''. Этот метод полностью соответствует требованиям IE5. Но опять же, есть ли доля недостатков, в зависимости от ситуации. – Sandwich

Вот отрывок из моей личной библиотеки, которые могут помочь вам, также, проверить это question и это более конкретный JavaScriptsolution.

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

По умолчанию эти значения являются абсолютными для <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; 
}

источник

2011-01-05 20:20:55 Sandwich

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

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

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

источник

2011-01-06 00:08:45 pd1138

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

Он даже работает в IE5!

источник

2011-02-11 19:13:32 cyreb7

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

ответ

Смежные вопросы