Question

我有一个被问过一千多次的问题，我整个上午都在阅读simulair问题，但我不能解决这个问题，所以希望有人能帮帮我。

这是我的演示：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），这是定位绝对和底部：0px所以它坚持div.two的页脚。 div.two有一个透明的背景（它的小提琴，因为我似乎无法将其设置为透明）

现在，当您开始缩放窗口时，您会看到橙色框（div.content）将开始向上扩展，因为文本具有较小的空间水平，但只要它的div 2的完整高度只是继续前进和开始重叠div.one，虽然我想要它tp将自己压低对抗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% 和在内部多个可能不是所需的效果，除非你希望每个人占据窗口的整个高度。

绝对子div在缩放时不会调整相对父div的大小

2 个答案: