Question

除非在标记之间提供文本，否则不会出现输出。有没有办法来解决这个问题？预先感谢

HTML代码

.Top {
        height: 20%;
        width: 80%;
        background: linear-gradient(#bc581e, #e27b36);
        border-radius: 50% 50% 0 0;
        box-shadow: inset -15px 0 #c15711;
        margin: 2% auto;
        position: relative;
    }

<div class="Top">top</div>

JSBIN网址：CLICK HERE

Answer 1

如果要在height中设置%，则必须将height定义为element的父级，在您的情况下，html/body是父级，因此设置height:100%;给父母

html,body{
height:100%;
}
.Top {
        height: 20%;
        width: 80%;
        background: linear-gradient(#bc581e, #e27b36);
        border-radius: 50% 50% 0 0;
        box-shadow: inset -15px 0 #c15711;
        margin: 2% auto;
        position: relative;
    }

<div class="Top"></div>

或在height中设置px而不是%

.Top {
        height: 20px;
        width: 80%;
        background: linear-gradient(#bc581e, #e27b36);
        border-radius: 50% 50% 0 0;
        box-shadow: inset -15px 0 #c15711;
        margin: 2% auto;
        position: relative;
    }

<div class="Top"></div>

Answer 2

添加HTML & Body Height 100%

html,body{
  height:100%;
}

https://jsbin.com/ciqivicevu/1/edit?html,css,output

Answer 3

方法1：

以px为单位设置实际大小

height: 15px;

方法2：添加

body{
  height: 100vh;
}

另一方面较差的解决方案：

<div class="Top">&nbsp;</div>

Answer 4

您尚未为父元素提供任何高度。定义父级或body标签的宽度和高度。

body{
  height:100%;
}

或定义父元素并为其指定高度。

<div class="wrapper">
  <div class="Top"></div>
</div>

OR

为.Top类定义高度（以像素为单位）

Answer 5

尝试像下面那样更改css

 .Top {
     height: 20px;
     width: 80%;
     background: linear-gradient(#bc581e, #e27b36);
     border-radius: 50% 50% 0 0;
     box-shadow: inset -15px 0 #c15711;
     margin: 2% auto;
     position: relative;
  }

％在这里与父级的％有关。因此，当您尝试在％中指定height时，它将寻找父级高度以计算它的％。但是如果宽度为（％）（如果不存在父对象），则将采用窗口宽度。

CSS无法在HTML文件中正常工作

5 个答案: