解决方案1.使用特定高度

Question

＆＃13;

<div id="parent-div" style="height:1000px">
  <div id="child-div" style="background-color:#808080"></div>
</div>

＆＃13;

如何设置父类的高度？

如果我降低了父div的高度，则应将子div设置为父div。

Answer 1

只需设置#child-div属性height: 100%：

#parent-div {
  height:1000px;
}

#child-div {
  height:100%;
  background-color:red;
}

<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <div id="parent-div">
        <div id="child-div">
          
        </div>
    </div>
</body>
</html>

Answer 2

如果我理解你想要你想要设定父母和孩子的身高吗？如果是这样，你可以添加一个容器div和样式，因此容器中的任何东西都将是你设置它的高度。

Answer 3

您可以在百分比中设置子节点的宽度和高度值。然后它会根据您在父div中的更改而改变。

#parent-div{
  width:200px;
  /*height:200px;*/
  background-color:red;
  }
#child-div{
  width:100%;
  height:100%;
  margin:auto;
  background-color:red;
  }

<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <div id="parent-div" style="height:1000px">
        <div id="child-div" style="background-color:#808080">
          
        </div>
    </div>
</body>
</html>

Answer 4

<html>
<head>
   <title></title>
   <meta charset="utf-8" />
</head>
<body>
  <div id="parent-div" style="height:1000px">
    <div id="child-div" style="background-color:#808080;height:100%"></div>
   </div>
</body>
</html>

Answer 5

解决方案1.使用特定高度

只需将高度100％添加到孩子身上即可正常工作（因为这100％是相对于其父亲而言）。

使用CSS：

#parent-div {
  height: 300px;
}

#child-div {
  background: #808080;
  height: 100%;
}

使用以下HTML：

<div id="parent-div">
  <div id="child-div">
  </div>
</div>

以下是一个工作示例：http://codepen.io/anon/pen/ZBxbKM

解决方案2.使用min-height

如果您希望父级的高度与内容一起增长，则应使用min-height。遗憾的是，min-height未明确指定高度。这对孩子来说也是如此：

百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值将计算为“auto”。

来源：child inside parent with min-height 100% not inheriting height

这意味着孩子'认为'父母没有身高，因此100％是0（或内容身高）。由于您没有明确指定高度（根据上面的定义），您应该使用绝对定位来使其工作。

使用CSS：

* { 
  width: 100%; 
  position: absolute;
}

#parent-div {
  min-height: 300px;
}

#child-div {
  background: #808080;
  height: 100%;
}

使用以下HTML：

<div id="parent-div">
  <div id="child-div">
  </div>
</div>

以下是一个工作示例：http://codepen.io/anon/pen/LbdVmX

如何设置父div的默认高度

5 个答案:

解决方案1.使用特定高度

解决方案2.使用min-height