Question

.circle {
    max-width: 150px;
    width: 100%;
    max-height: 150px;
    height: 100%;
    display: block;
    background: #ff4040;
    border-radius:50%; 
}

嗨，我正在尝试用bg颜色创建一个圆圈。但是根据我上面附加的样式，我无法正常工作。它没有高。你能告诉我为什么吗？谢谢：）

Answer 1

总是建议在对子元素使用height:100%之前向父母/祖父母提及身高

尝试一下

.circle {
    max-width: 150px;
    width: 100%;
    max-height: 150px;
    height: 100%;
    display: block;
    background: #ff4040;
    border-radius:50%; 
}

body{
    height:100vh;
    position:relative;
}

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

如果您仍然不想在body元素（父元素）中提及身高，则可以这样定义它们

因为默认情况下div元素是block元素

块元素始终具有100%的宽度，但没有确定的高度

因此，请定义最大宽度为实际大小，并将其width设置为100%，以使其不会脱离给定的宽度。

但是当涉及到高度div时，默认情况下没有高度，因此请在此处将height或min-height设置为所需值，然后添加max-height:100%（可选）

块级元素总是从新行开始并占用可用的全宽（向左和向右延伸）可以）

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

    .circle {
        max-width: 150px;
        width:100%;
        max-height: 100%;
        min-height:150px;
        display: block;
        background: #ff4040;
        border-radius:100%; 
    }

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

Answer 2

您需要声明一个父元素的高度，以便能够在子元素上使用％-size。

例如：

.parent{
    height: 666px; //or any %-value if the grandmother height is defined trailing back to the html-element
}

检查这个小提琴：

https://jsfiddle.net/n1o8057L/1/

高度样式属性问题。

2 个答案: