0

例如这个 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%;
    }

有没有办法让它显示？

4

2 回答 2

5

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

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

html,
body {
  height: 100%;
}

工作小提琴

你可以在这里阅读为什么会有这样height: 100%;的行为

于 2013-03-14T17:32:06.070 回答
3

您需要在某处声明一个硬宽度/高度，在此示例中，我在容器 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-14T17:34:24.907 回答