1

  • 是否可以在不知道父级高度的情况下为 div 提供 % 高度？或者更好地说，如果父母的高度发生变化。如果这是不可能的：

  • 拥有文本和颜色背景以及对任何设备都灵活的所有内容的更好方法是什么？文字应该与背景有一定的距离。像这种情况：

这是简化的示例：http: //jsfiddle.net/hQtMU/

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 ? */
}
4

2 回答 2

0

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

但

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

例子

于 2013-05-03T09:28:22.467 回答
0

这是你想要达到的目标吗？

我使用填充而不是高度。

http://jsfiddle.net/WSACt/

.text {
    position:relative;
    margin:0px auto;
    padding:10%;
}
于 2013-05-03T09:31:31.140 回答