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

Posted 2023-03-21

【中文标题】绝对子 div 在缩放时不会调整相对父 div 的大小

【英文标题】：absolute child div doesnt size the relative parent div on scaling

【发布时间】：2014-02-21 07:04:32

【问题描述】：

我有一个问题被问了一千多次，我花了整个上午阅读模拟问题，但无法解决我的问题，所以希望任何人都可以帮助我。

这是我的演示：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 的方法。

【问题讨论】：

绝对定位的项目超出了正常的内容流（如果我有一块钱……）。这种行为是它应该做的。尝试使用相对定位。

或者，您可以设置一个margin-top 顶部容器的高度来偏移它。

我做到了。但是这样我就不会把它弄到底部，因为一切都是动态的。所以我不能使用设置的边距和东西..

例如，如果我添加 margin-top:40%;它在屏幕足够大以显示所有文本时工作。但是当它不是#container 时，高度将不再是 60%，所以边距会将其推到 div.three

查看新答案***.com/a/21431927/2984432

【参考方案1】：

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

相对位置。

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

【讨论】：

hmm.. 现在没有任何 div 是 100%。 randomshirts.nl/letterfabriek8 看看这个 div 1 和 2，看看缩放时会发生什么

@Merijndk 只是强制文字高度为 100% 的问题。见jsfiddle.net/4qx6a/3

好吧，这行得通。但 div 内容不会粘在 div.two 的底部，因为 bottom:0 在相对 div 上不起作用。

到底需要坚持什么？如果你想要一些额外的空间，只需使用margin-top！

不，我不想有额外的空间。它更像是一个设计问题。看看randomshirts.nl/letterfabriek8 看看容器将如何翻转 div 1 并在顶部留出空间。我们想要一个模拟效果

【参考方案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

【讨论】：

不，这不起作用。看看 div.three。而不是容器向上缩放到 div.one。它现在向下缩放并超过 div.three

感谢您的工作......但它仍然无法正常工作。如果您向 div.content 添加大量文本并对其进行缩放，您将看到内容超过 div.one..