父母身高基于相对定位的孩子 [英] Parent height based on relative positioned children

问题描述

css是一件奇妙的事情，除非您被阻止并且没有 ahaha时刻。

css is a marvelous thing except when you are blocked and you haven't had your ahaha moment.

今天，我很难将包含相对位置元素的父div的缩放高度调整为适当的高度。这是因为孩子们正在使用 top 属性。

Today I am having trouble to scale the height of my parent div containing a relative positioned element to the proper height. This is because the children is using a top property.

现在我知道 top 适用于相对定位的元素，我理解为什么它不包含正确的高度值。

Now I know how top works on relative positioned element and I understand why it does not contains the proper height value.

我想知道的是：

是否可以在不更改填充或边距的情况下将此顶级属性包含在我父母的高度？

此处是我的代码的提琴手： http://cssdeck.com/labs/unfeydw0

或下面的简单代码：

Here is a fiddle of my code: http://cssdeck.com/labs/unfeydw0
Or a simple code below:

html：

<div>
    <div class="relative">
    </div>
</div>

css：

.relative {
    position: relative;
    top: 42px;
    height: 40px;
    width: 100%;
    background: red;
}

谢谢。

推荐答案

指定 top时，将始终移动对象而不影响父对象的高度。这意味着，如果您想影响它的高度，就必须用边距移动它。

When you specify "top" you will move your object always without affecting parent's height. Which means that if you want to affect it's height you will have to move it with margins.

因此，您的答案是：不可能。规范如下： http://www.w3.org/TR/CSS2/ visudet.html＃Computing_heights_and_margins

So your answer is: "No it is not possible". Here is the specification: http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

这篇关于父母身高基于相对定位的孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！