2014-08-27 2 views
1

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

Я пробовал различные варианты очистки: both/overflow: xxx/и height: auto. Это кажется мне очень простым, но это как-то не работает, как я ожидаю. Я разделся его к этому:

<div class="jumbotron"> 
    <div class=" infobox"> 
     Test 
    </div> 
</div> 

И это CSS сниппет:

.jumbotron{ 
    background-color: #000; 
    position: relative; 
    min-height: 300px; 
} 
.jumbotron .infobox{ 
    background-color: #dddddd; 
    position: absolute; 
    bottom: 10px; 
    width: 500px; 
    height: 900px; 
} 

То, что я хочу достичь, это иметь внутренний ДИВ «расти» вверх от нижней части наружной ДИВ и сделать внешняя расширяется соответственно.

Любая помощь приветствуется!

Thanks, Dario

+1

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

+0

Единственный способ - добавить несколько js. –

ответ

1

Хорошо, спасибо за комментарии.

Это решает его:

$('.jumbotron').height($('.infobox').height()); 

В OnLoad части документа.

1

Не на 100% уверены, что вы просите, но посмотрите, поможет ли вам this fiddle.

Получите и установите положение и высоту, используя JQuery на основе друг друга. Запускается как при создании документа, так и при изменении размера страницы. Как и другие, JavaCript необходим для такой вещи. JS, как указано ниже:

$(function(){ 
    $('.infobox').offset($('.jumbotron').position()); 
    $('.jumbotron').height($('.infobox').height()); 
}); 

$(window).resize(function(){ 
    $('.infobox').offset($('.jumbotron').position()); 
    $('.jumbotron').height($('.infobox').height()); 
}); 
+1

спасибо, это действительно помогает;) – IchHabsDrauf

0

Ответ очень странный, но обязательно будет работать.

Когда внутренний DIV находится в absolute положения, то просто добавьте overflow:hidden CSS на вашем внешнем DIV (например: здесь .jumbotron является внешними делами), и вы можете удалить min-height из внешнего DIV, и внешний DIV автоматически принимает высота внутреннего div.

(Убедитесь, что внешний DIV не должны иметь какой-либо конкретной высоты)

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