Question

我正在尝试创建一个响应式div，它有一个部分并且旁边。父div占据25％的高度。并且子div必须占据其父容器的80％。但如果高度为％，它们就不会占用。但是，当以像素为单位给出高度时，它可以正常工作。谁能告诉我哪里出错了。这是html

<div class="container">

  <section>
    This is supposed to be a section
  </section>
  <aside>
    This is supposed to be aside

  </aside>

</div>

这是CSS

.container{
  width: 100%;
  background: red;
  height: 25%;
}

.container::before,
.container::after{
  content: "";
  display: table;

}

.container::after{
  clear: both;
}

section{
  float: left;
  width: 40%;
  height: 100%;
  display: block;
}

aside{
  float: right;
  width: 40%;
  height: 80%;
}

section, aside{
  background: green;
  border-radius: 6px;
  margin: 5%;
}

这是我的小提琴https://jsfiddle.net/gvpmahesh/Lhpv0k2x/3/

Answer 1

您需要在父元素上应用position: relative; height: 100%;，即html和body。

您还需要对要使用％height的任何元素应用position: relative;。

小提琴：https://jsfiddle.net/vdy82azk/

在每个元素上都不需要

编辑 position: relative;。（见某事的评论）

Answer 2

您需要指定身高和html标签的高度

https://jsfiddle.net/Lhpv0k2x/5/

body,html { height: 100%; }

修改

我不是float粉丝，但如果您需要使用它，您可以这样做：

https://jsfiddle.net/Lhpv0k2x/9/

我编辑：

.container垂直填充5％（以避免元素中的垂直边距）
section, aside，保证金仅水平为5％

这就是全部

Answer 3

你需要这样的东西：

descriptor

链接：

 html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;

            }
.container{
  width: 100%;
  background: red;
  height: 25%;
}

.container::before,
.container::after{
  content: "";
  display: table;

}

.container::after{
  clear: both;
}

section{
  float: left;
  width: 40%;
  height: 80%;
  display: block;
}

aside{
  float: right;
  width: 40%;
  height: 80%;
}

section, aside{
  background: green;
  border-radius: 6px;
  margin:5%;
}

％高度不能像我预期的那样工作

3 个答案:

修改