html - 绝对子 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 有一个透明的背景(它在 fiddle 中是白色的，因为我似乎无法将它设置为透明的)

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

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

Answer 1

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

相对定位。

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