Question

<body>
  <section class="container">
    <div class="child">
      //content goeshere
    </div>
  </section>
<body>

这是我的HTML代码。我需要孩子＆＃39; class div的高度应该基于body标签。我怎样才能通过css实现这一目标。

Answer 1

如果您希望.child覆盖整个屏幕高度，则需要

设置身高等于100vh - vh是视口高度单位，1vh =窗口高度的1％
将container身高设置为其父级的100％，表示body
将child身高设置为其父级的100％，表示container

body {
  height: 100vh;
}
.container {
    height: 100%;
} 
.child {
    height: 100%;
    background: orange;
}

<body>
  <section class="container">
    <div class="child">
      //content goeshere
    </div>
  </section>
</body>

这是另一种解决方案，其中儿童的高度不限于容器高度。（为了更好看，增加了背景和不同的宽度和高度）

body {
     position: absolute;
     width: 80%;
     height: 80%;
     border: 1px solid green;
     background: lightgreen;
}
.container {
    width: 20%;
    height: 100px;
    background: teal;
} 
.child {
    position: absolute;
    width: 50%;
    height: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 0;
    background: orange;
}

<body>
    <section class="container">
     Before content
    <div class="child">
      //content goeshere
    </div>
    After content
  </section>
</body>

Answer 2

使用相同的班级名称........

例如：

<body>
  <section class="child">
    <div class="child">
      //content goeshere
    </div>
  </section>
<body>

如何根据父母父母扩大孩子的身高

2 个答案: