CSS 100vh responsive issue

Question

I created this css snippet.

.container {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  height: calc(100vh - 50px);
}

.container__img {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: red;
  padding: 25px;
}

<div class="header">HEADER</div>
<div class="container">
  <div class="container__inner">
    <div class="container__img">
      HELLO
      <img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
    </div>
  </div>
</div>

I set 100vh to have the page 100% of page height, but appears the next issue when i resize the page vertically:

How you can see the image goes over the header, but it should stop when is near header like: Question: Why it is happening and how to solve this?

@ShounakDas, why? this is a good practice to set the height of the page. Could you explain? And what your comment has related to my question? — Asking, Dec 09 '20 at 07:42
@ShounakDas, you say that `height: calc(100vh - 50px);` is not correct? https://css-tricks.com/a-complete-guide-to-calc-in-css/ — Asking, Dec 09 '20 at 07:45
you can subtract it in calc https://developer.mozilla.org/en-US/docs/Web/CSS/calc() — Pauline Nemchak, Dec 09 '20 at 07:47
Only IE and Opera mini doesn't support calc. So you can used it. — Sfili_81, Dec 09 '20 at 07:52

score 0 · Answer 1 · answered Dec 09 '20 at 08:28

Make it a habit for yourself to wrap all the divas in the main div:

<div class="main">
...
</div>

When this main div is absent in the structure of html, then problems may arise in the future.

I made some changes to the css. If you have any questions, then ask me.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  flex: auto;
}

.container__img {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: red;
  padding: 25px;
}

<div class="main">
  <div class="header">HEADER</div>
  <div class="container">
    <div class="container__inner">
      <div class="container__img">
        HELLO
        <img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
      </div>
    </div>
  </div>
</div>

a small addition: it's a bit better to inherit border-box instead of setting it for each element https://css-tricks.com/box-sizing/ — Pauline Nemchak, Dec 09 '20 at 10:29

score 0 · Answer 2 · answered Dec 09 '20 at 09:24

When you resize the page vertically, the image goes over the header because the div "container__inner" and the div "container__img" have height: auto (by default). That means their height will be equal to the maximum height of the elements inside (here is the img).

To solve this problem, you just need to set height: 100% for one of them. Then its height will not exceed the height of the parent element (the div "container")

score 0 · Answer 3 · answered Dec 09 '20 at 11:10

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  flex: auto;
}

.container__img {
  display: flex;
  flex-direction: column;
 text-align: center;
}

.header {
  background-color: red;
  padding: 25px;
  text-align: center;
}

<div class="main">
  <div class="header">HEADER</div>
  <div class="container">
    <div class="container__inner">
      <div class="container__img">
        HELLO
        <img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
      </div>
    </div>
  </div>
</div>

Please avoid code-only answers. The question explicitly asks "Why it is happening" and you don't address that at all. — Quentin, Dec 09 '20 at 11:14

CSS 100vh responsive issue

3 Answers3