Question

我正在创建一个父级宽度为100％的div，现在我希望它是父级的10％高度（不管内容的长度是多少）。

我设置height: 10%但它仍然无法解决我的问题。

这是我的css：

body {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

.header {
    display: inline-block;
    background-color: #008CDA;
    width: 100%;
    height: 10%;
    margin: 0px auto;
    padding: 0px;
}

Answer 1

这是一个快速的JSfiddle，显示了一个如你所描述的父子关系： https://jsfiddle.net/k0jur7yf/

{.child {
  height:10%;
  width:100%;
  background-color: red;
}

如果这不能解决您的问题，您能否向我们展示一段代码？

Answer 2

他的父母必须有身高：100％。

通常看起来像这样：

html,
body {
  height: 100%;
  background-color:grey;
}
.wrap {
  height: 100%;
  background-color:yellow;
}
.your_div {
  height: 10%;
  background-color:red;
}

<div class="wrap">
  <div class="your_div"></div>
</div>

Answer 3

检查它，首先创建一个div及其类父类。 enter image description here 在Css文件或head中添加了以下类。 .parent {身高：10％;宽度：100％;}

Answer 4

在div中如果你使用％的宽度和高度样式，那么它将根据内容进行调整，但是当你在px中使用样式时，它将根据宽度和高度的大小来进行调整。例如：

<div style="width:100%;height:10%;border: 3px solid red">FOr example</div>

<div style="width:100px;height:10px:border:3px solid red">

按％

4 个答案: