Question

是否可以在不知道父级高度的情况下给div增加％高度？或者更好的说，如果父母的身高发生变化。如果无法做到这一点：
有什么更好的方法可以让文字和背景颜色以及任何设备都具有灵活性？文本应该与背景有一些距离。像这种情况：

HTML：

<div class="grey">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna erat, viverra at elementum at, elementum vitae mauris. Aenean in quam lorem, ut blandit ante. Integer sit amet nisi massa, at adipiscing nunc. Duis in risus a sapien blandit ultrices. Morbi ut ante eu neque porta lacinia et sed nisi. Donec luctus, enim in hendrerit ornare, purus libero adipiscing tortor, eget volutpat nunc tellus vitae turpis. Mauris sed fringilla nibh. Mauris pellentesque mauris eget velit iaculis tincidunt. Suspendisse neque velit, adipiscing nec consectetur sit amet, porttitor sed tortor. Vestibulum interdum auctor lorem, a porta metus eleifend in. Maecenas a lobortis neque. Duis fermentum arcu purus. Praesent eget diam sed felis varius semper ut a tortor. Cras bibendum sollicitudin facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut auctor adipiscing risus, eget interdum libero ultricies at.
</div><!-- end text -->
</div><!-- end grey -->

CSS：

html, body { height: 100%; width: 100%; margin: 0; }

.grey{
    position:relative;
    margin:0px auto;
    top:0px; left:0px;
    width:90%; 
    height:auto;
    min-width:320px;
    background:grey;        
}

.text {
    position:relative;
    margin:0px auto;
    width:80%; 
    height:80%; /* this does no work ? */
}

Answer 1

如果.text的高度为％，那么它的高度将是最接近祖先元素的百分比，其中的位置不是静态的。如果祖先的高度是auto，那么它的高度会被拉伸到它的内容。如果其中的唯一内容是.text元素，则其高度由.text高度定义，换句话说，.text高度应计算为 80％它的高度当然无法计算。

<强>但是

如果.text不是.grey中的唯一元素且绝对定位那么，.grey高度将由其中的其他内容计算然后，.text将是其中的80％。

example

Answer 2

这是你想要实现的目标吗？

我使用填充而不是高度。

http://jsfiddle.net/WSACt/

.text {
    position:relative;
    margin:0px auto;
    padding:10%;
}

％高度没有父级的高度

2 个答案: