Абсолютный дочерний div не измеряет относительный родительский div при масштабировании

Question

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

это мое демо: http://jsfiddle.net/skunheal/4qx6a/1/

#one{
width:100%;
min-height:100%;
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg');
background-attachment:fixed;
color:#fff;
}

#two{
width:100%;
min-height:100%;
background-color:transparent;
position:relative
}

#content{
min-height:60%;
position: absolute;
bottom:0px;
background:#ff9900;
}

У меня есть 3 div, все 100% высоты, у первого div (div.one) есть прикрепленная картинка. Второе div (div.two) имеет оранжевое текстовое поле div (div.container), которое позиционируется как абсолютное и bottom:0px, поэтому он придерживается нижнего колонтитула div.two. У div.two прозрачный фон (белый на скрипке, потому что я не могу установить его на прозрачный)

Теперь, когда вы начнете масштабировать окно, вы увидите, что оранжевый прямоугольник (div.content) начнет расширяться вверх, потому что текст имеет меньший горизонтальный размер, но как только его полная высота div 2 просто продолжает двигаться и начинает перекрывать div. один, хотя я хочу, чтобы он упал против div один и сделал его prant div.two больше.

Как я могу это исправить, потому что я не могу найти способ сделать это без использования JavaScript.

Answer 1

Я сделал похожий, который вы можете использовать. Это работает нормально, если я правильно понял ваш вопрос.

HTML

<div id="one"></div>
<div id="two">
    <div id="content"></div>
</div>
<div id="three"></div>    

CSS

* {
    margin:0;
    padding:0;
}
body, html {
    height:100%;
}
#one {
    width:100%;
    height:100%;
    background:pink;
}
#two {
    position:relative;
    width:100%;
    height:100%;
    background:transparent;
}
#content {
    width:100%;
    background:grey;
    border-top:3px solid black;
    position:absolute;
    bottom:0;
    min-height:60%;
}
#three {
    width:100%;
    height:100%;
    background:green;
}

работает Fiddle Link

Answer 2

http://jsfiddle.net/4qx6a/2/

Расположен с относительным.

Кстати, настройка min-height:100% на вашем контейнере и больше чем один на внутренней стороне, вероятно, не желаемый эффект, если вы не хотите, чтобы каждый занимал всю высоту окна.