Сделать абсолютно позиционированное div высотой родительского контейнера

Как сделать красный div равным по высоте родительским желтым div?Сделать абсолютно позиционированное div высотой родительского контейнера

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div class="main"> 
    <div class="left"> 
    </div> 
    <div class="right"> 
    </div> 
    </div> 
</body> 
</html>

CSS:

.main { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0px; 
    background-color: yellow; 
    overflow: auto; 
} 

.left { 
    background-color: orange; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 2000px; 
} 

.right { 
    background-color: orangered; 
    position: absolute; 
    top: 0; 
    left: 200px; 
    right: 0; 
    bottom: 0; 
}

Пример здесь: http://jsbin.com/fafexulube/edit?html,css,output

Update: высота левой DIV не может быть изменен, то есть 2000px, чтобы показать, что это выше его родителя.

источник

2015-02-04 andriys

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

он поставляется с территорией ... Если нет очевидного решения, я, скорее всего, поеду с ячейками таблицы. – andriys

Если вы установите position на родитель к чему-то другому, чем static, вы можете использовать height:100%; или top:0; bottom:0; на ребенке.

Если вы хотите, чтобы родственник определял высоту родителя, вы не можете установить его на position:absolute;.

Взгляните на этот обновленный jsbin: http://jsbin.com/qavihuleme/3/edit.

В частности, добавьте position:relative; к родительскому и удалите position:absolute; от родного брата (.left).

источник

2015-02-04 22:52:55

вы изменили проблему, когда вы устанавливаете высоту на родительском и делаете дочерние divs высотой родителя. В начальной задаче высота определяется левым div. – andriys

Удивительный! Это то, что я искал. Спасибо! – andriys

http://jsbin.com/cacopejabe/1/

Make ДИВ размеров матч ... Желтый контейнер DIV является, таким образом, что вам нужно сделать другие две дивы же размера ... Я взял 2000px высоты на левой стороне ... Вы можете поставить 2000px высота на черном (красный).

источник

2015-02-04 22:47:52 spooky

размер обоих левых и правых divs определяется их содержимым, которое генерируется динамически. то, что вы предлагаете, может не работать из-за этого – andriys

У вас есть стиль «height: 2000px;» на «.left» это то, что вызывает несоответствие. Ваш комментарий не соответствует коду, который вы отправили ... – spooky

2000px в моем примере - это упрощение, то есть есть некоторое содержание этой высоты. Эта высота заставляет родителя настраивать, но не правый div. Как я вижу, комментарий соответствует коду. – andriys

Ну, проблема в том, что позиция абсолютно абсолютная, она возится с макетом, вы действительно должны использовать поплавки или если вам не нужны старые браузеры, flexbox. Это глубокое и грязное решение js/jquery xD:

jQuery(document).ready(function($) { 
    var height = $('.left').css('height'); 
    $('.right').css('height', height); 
});

источник

2015-02-04 23:06:55 IGRACH

приятный хак для отчаянных времен :) – andriys

Сделать абсолютно позиционированное div высотой родительского контейнера

ответ

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