关于html：高度100％的div


Height 100% of a div

本问题已经有最佳答案，请猛点这里访问。

我正在努力做一些应该很容易的事情。我有两个div，我想让它们填满垂直空间的100%，但我不能！

这是我的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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;
}
1
2
3
4
5
  <section class="left">
    Lorem ipsum dolor sit amet.
  </section>
  <section class="right">
  </section>

号

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

这是一个非常简单的问题，但我做不到！

谢谢

相关讨论

1
2
3
4
.Contact{
    display: flex;
    height: 100vh;
}

尝试使用vh或vw。

vh表示高度视图。例如，

如果你写的是50vh，这意味着50%的高度。

如果你写的是100vh，这意味着100%的视图。

vw表示宽度视图。

例如，

如果你写50vw，它意味着50%的视图宽度。

如果你写100vw，它意味着100%的视图宽度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.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;
}

号

1
2
3
4
5
  <section class="left">
    Lorem ipsum dolor sit amet.
  </section>
  <section class="right">
  </section>

相关讨论

将height: 100%;添加到html, body和flex元素，并将margin: 0添加到主体，以避免出现默认边距：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body,
html {
  height: 100%;
  margin: 0;
}

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

.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;
}
1
2
3
4
5
  <section class="left">
    Lorem ipsum dolor sit amet.
  </section>
  <section class="right">
  </section>

或者在jfiddle中：https://jsfiddle.net/f2no28a4/1/

只需更新代码：

1
2
3
4
5
6
7
8
.Contact {
display: flex;
    height: 100%;
}

html, body {
    height: 100%;
}

。

相关讨论