2013-05-03 101 views
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 ? */ 
} 
+1

没有,因为父母的身高将永远同孩子们的 – Morpheus 2013-05-03 08:45:04

+0

http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-父母 - 母亲 - 没有指定 - 父母 - 身高 – Morpheus 2013-05-03 08:54:26

回答

0

难道这就是你在哪里想达到什么目的?

我用填充而不是高度。

http://jsfiddle.net/WSACt/

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

如果将填充设置为百分比,它始终与父宽度相关,即使使用'padding-top:10 %'。 – xpy 2013-05-03 09:34:43

+0

也许你应该改写你的问题来更好地描述你实际尝试实现的目标,而不是技术问题。我可能会误解你想要做的事情。编辑:对不起,以为你在哪里OP – Kayo 2013-05-03 09:37:55

+0

好吧。谢谢。但在你的小提琴中,你必须删除.text的宽度和高度。这里解决了:http://jsfiddle.net/WSACt/1/ – Nrc 2013-05-03 10:05:29

0

如果.text有%的高度,那么它的高度将是最接近的祖先元素与非静态位置的百分比。如果祖先的身高是auto那么它的身高就会被拉伸到它的内容。如果它内部的唯一内容是.text元素,那么它的高度是由.text高度定义的,换句话说,这意味着.text高度应该计算为它自己的高度的80%当然这是不能计算的。

但是

如果.text不在.grey的唯一元件,它是绝对定位然后,.grey高度将通过在其中的其他内容来计算,然后,.text将是80%它。

example

+1

这对于CSS的初始设计有点像 – Barney 2013-05-03 09:30:04

相关问题