有没有办法显示宽度为％，没有内容的div？

例如显示这个div：有没有办法显示宽度为％，没有内容的div？

<div class="circle"></div 

.circle { 
    width: 300px; 
    height: 300px; 
    background: red; 
    border-radius: 50%; 
}

但是当宽度和高度都在％，该崩溃：

.circle { 
     width: 30%; 
     height: 30%; 
     background: red; 
     border-radius: 50%; 
    }

有没有办法得到它显示？

来源

2013-03-14 gskalinskii

多一点代码会有帮助。这个'div'里面有什么元素？ – Niro 2013-03-14 17:32:00

父容器的尺寸是多少？ – 2013-03-14 17:32:04

这是因为div没有高度。 width: 30%;将始终使父母的div宽度为30％（在本例中为<body>），这正是您想要的。但是，高度的行为有点不同。

你需要指定一个100％的高度，身体和HTML像这样：

html, 
body { 
    height: 100%; 
}

Working Fiddle

您可以了解为什么height: 100%;行为就像是here

来源

2013-03-14 17:32:06 Andy

虚假信息 - 宽度30％使* div元素的宽度的30％* - *不*浏览器。 – Adrian 2013-03-14 17:33:06

这个解决方案不是一个完美的圆圈：http://jsfiddle.net/EcLzC/ – 2013-03-14 17:33:57

@Adrian在OP的例子中，父母是身体，所以基本上是一样的东西。虽然编辑。 – Andy 2013-03-14 17:33:57

你需要声明一个硬宽度/高度在某个地方，在这个例子中，我把硬宽度/高度放在一个容器div上：

http://jsfiddle.net/exrNm/1/

<div class="con"> 
    <div class="circle"></div 
</div> 

.con{ 
    width:300px; 
    height:300px 
} 

.circle { 
    width: 30%; 
    height: 30%; 
    background: red; 
    border-radius: 50%; 
}

您可以很容易地在母链上某处设置一个硬度宽度。％需要一个难以计算的值。

来源

2013-03-14 17:34:24 Lowkase

有没有办法显示宽度为％，没有内容的div？

回答

相关问题