Height 100% of a div

Question

I'm struggling with something that supposedly has to be very easy. I have two div, and I want them to fill the 100% of the vertical space; But I can't!

This is my code:

.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>

And there is a fiddle: https://jsfiddle.net/stcd2k1s/

It is a very simple question, but I can't make it work!

Thanks

Did you try refreshing your cache on the page to make sure you aren't seeing old CSS settings? — EricP., Oct 03 '17 at 12:20

kyun · Answer 1 · 2017-10-03T13:22:50.167

1

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

Try to use vh or vw.

vh means view of height. For example,

If you write 50vh, it means 50% height of view.

If you write 100vh, it means 100% of view.

vw means view of width.

For example,

If you write 50vw, it means 50% width of view.

If you write 100vw, it means 100% width of view.

.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>

edited Oct 03 '17 at 13:22

answered Oct 03 '17 at 12:22

kyun

9,710
9
31
66

What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! https://stackoverflow.com/help/how-to-answer – Rob Oct 03 '17 at 13:11
@Rob I suggest using `vw` and `vh`. What's problem? – kyun Oct 03 '17 at 13:14
How does using vw and vh answer the question? You are feeding him fish but not teaching him how to fish. – Rob Oct 03 '17 at 13:16
@Rob I'm not teacher. I'm a server. I don't have ability for teach with English. I just want to help. Why everyone be teacher? – kyun Oct 03 '17 at 13:21
1

https://stackoverflow.com/help/how-to-answer – Rob Oct 03 '17 at 13:22

score 0 · Answer 2 · answered Oct 03 '17 at 12:23

0

Just update your code with:

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

html, body {
    height: 100%;
}

answered Oct 03 '17 at 12:23

Pedram

15,766
10
44
73

1

What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! https://stackoverflow.com/help/how-to-answer – Rob Oct 03 '17 at 13:11

Johannes · Answer 3 · 2017-10-03T13:32:30.277

Add height: 100%; to html, body and to your flex element, and also add margin: 0 to the body to avoid a default margin:

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;
}

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

Or in your jsfiddle: https://jsfiddle.net/f2no28a4/1/

Height 100% of a div

3 Answers3