Question

我正在努力做一些本来应该非常容易的事情。我有两个div，我希望它们填满100％的垂直空间;但我不能！

这是我的代码：

.Contact {
  display: flex;
}

.left {
  width: 60%;
  background-color: tomato;
}

.right {
  width: 40%;
  background-color: pink;
  transition: all 0.5s ease;
}

.right:hover {
  width: 50%;
  transition: all 0.5s ease;
}

<div class="Contact">
  <section class="left">
    <h1>Lorem ipsum dolor sit amet.</h1>
  </section>
  <section class="right">
  </section>
</div>

还有一个小提琴：https://jsfiddle.net/stcd2k1s/

这是一个非常简单的问题，但我无法使其发挥作用！

由于

Answer 1

.Contact{
    display: flex;
    height: 100vh;
}

尝试使用vh或vw。

vh表示高度视图。例如，

如果你写50vh，则意味着50％的视野高度。

如果您写100vh，则表示100％的观看次数。

vw表示宽度视图。

例如，

如果您编写50vw，则表示视图宽度为50％。

如果您写100vw，则表示视图宽度为100％。

.Contact {
  display: flex;
  height: 100vh;
}

.left {
  width: 60%;
  background-color: tomato;
}

.right {
  width: 40%;
  background-color: pink;
  transition: all 0.5s ease;
}

.right:hover {
  width: 50%;
  transition: all 0.5s ease;
}

<div class="Contact">
  <section class="left">
    <h1>Lorem ipsum dolor sit amet.</h1>
  </section>
  <section class="right">
  </section>
</div>

Answer 2

只需使用以下代码更新您的代码：

.Contact {
display: flex;
    height: 100%;
}

html, body {
    height: 100%;
}

Answer 3

将stdClass Object ( [id] => 123123 [name] => my_name [my_val_one] => stdClass Object ( [my_val_two] => 1 [my_val_three] => 2323 [my_val_four] => 546567 ) )添加到$ob->my_val_one->my_val-two和您的flex元素，并将height: 100%;添加到正文以避免默认边距：

＆＃13;

html, body

＆＃13;

margin: 0

＆＃13;

或者在你的jsfiddle：https://jsfiddle.net/f2no28a4/1/

高度100％的div

3 个答案: