绝对子 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)，它是定位absolute 和bottom:0px 所以它坚持div.two 的页脚。 div.two 有一个透明的背景（它在小提琴中是白色的，因为我似乎无法将它设置为透明）

现在，当您开始缩放窗口时，您会看到橙色框 (div.content) 将开始向上扩展，因为文本的水平空间较小，但只要它的 div 2 的完整高度继续并开始重叠 div.one，虽然我希望它 tp 将自己推到 div 1 上并使他的 prant div.two 更大。

我该如何解决这个问题，因为我找不到不使用 javascript 的方法。

Answer 1

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

相对位置。

顺便说一句，在您的容器上设置min-height:100%并且在内部设置多个可能不是理想的效果，除非您希望每个都占据窗口的整个高度。

Answer 2

我做了一个类似的，你可以使用。如果我正确理解了您的问题，这可以正常工作。

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