Question

例如，显示此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%;
    }

有没有办法让它显示出来？

Answer 1

这是因为div没有高度。 width: 30%;将始终使div的父级宽度为30％（在这种情况下为<body>），这就是您想要的。但是，身高的表现略有不同。

您需要为body和html指定100％的高度，如下所示：

html,
body {
  height: 100%;
}

Working Fiddle

您可以阅读为什么height: 100%;的行为与here

相似

Answer 2

你需要在某个地方声明一个硬宽度/高度，在这个例子中，我在容器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%;
}

您可以轻松地在父链的某处设置硬宽度。％需要一个难以计算的值。

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

2 个答案: