Why does 90% of a div-height, is different on two different Screens?

Question

I want to take a `Div to take a height of a whole screen and have a nice frame around it and no scrolling.

Therefore I have the following HTML.

<div class="take-page-height">
  <div class="welcome-div">
    <div class="col-md-12 center-text">
      <div>
        <h1>Hello</h1>
      </div>
    </div>
  </div>
</div>

and the following CSS

.take-page-height {
  height: 100%;
  width: 100%;
  padding: 1.5%;
  position: fixed;
}

.welcome-div {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  background-color: $card-bg;
  background-clip: border-box;
}

When I decrease the height of the outer Div, the height differs among different screens. Even if I use percentages. Why is that the case?

and how can I solve my problem that the div takes the whole screen + the padding I gave it and without scrolling?

Kind regards

Percentages are relative to the screen size. If you want a defined size, use pixels. — Rojo, Dec 19 '20 at 15:04
He wants to take the height of the whole screen. Therefor he needs to use a relative measurement. Working with definite units like pixels, he would have a whole get an unresponsive mess on different screens. — tacoshy, Dec 19 '20 at 15:47

tacoshy · Answer 1 · 2020-12-19T16:04:01.690

1

To use the fulls creen height, use height: 100vh;. To use the full screen width, use: width: 100vw;.

The main issue will be, that it is a definite height of the content area. Means paddings, margins and border will overflow it and you get scrollbars by default.

To counter the issue the first approach should be to reset the default body margins with: body { margin: 0; }.

However the padding and border will still cause an overflow. The simple solution without using the calc function, is to change the default box behavior. The default box behavior is: box-sizing: content-box;. If you change it to box-sizing: border-box; the paddings and border will no longer cause an issue.

PS: I Added a red background color to the parant div for demonstration.

Edit, I moved the sizing to the body. Also declared the body as grid. Its set that the navbar will take the height that navbar would need and the text-area will fill up the remaining space. This is done by giving the row height of the navbar within the grid-template a height of min-content. So it will only be as height as the navbar requires. So its up to you if you declare it with a relative or fixed height or simply by using the contents height.

body {
  margin: 0;
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: min-content auto;
}

nav {
  min-height: 80px;
  background-color: blue;
}

.take-page-height {  
  padding: 1.5%;
  background-color: red; /* added for demonstration */
}

.welcome-div {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  background-color: green;
  background-clip: border-box;
}

<nav>Navbar here</nav>
<div class="take-page-height">
  <div class="welcome-div">
    <div class="col-md-12 center-text">
      <div>
        <h1>Hello</h1>
      </div>
    </div>
  </div>
</div>

edited Dec 19 '20 at 16:04

answered Dec 19 '20 at 15:27

tacoshy

10,642
5
17
34

Hi that works perfecty. Now what happens if you have a navbar above the take-page-height div? Then it doesnt work anymore. – Severin Koch Dec 19 '20 at 15:52
I edited the code snippet. It includes a navbar space. You can define the height as you want. The text area will fill up the remaining space. I hope that is what you intent to have, otherwise you need to specify. It is fully responsive. So if there is no navbar which equals a height of 0, then the etxt area will fill up 100% of the space. – tacoshy Dec 19 '20 at 16:05
Thanks sry for not clarifying. However I dont have possibility to include nav into Gridsystem. – Severin Koch Dec 19 '20 at 19:09
you can also use any other element aswell. Its just a question of what you want to include and how. Therefor you should specify. – tacoshy Dec 19 '20 at 19:10
Yes true. I dont know should I write a new Post. Basically its like the HTML in your answer but the Navbar is in a separate component and is not includable into the grid. To many components. So basically there are two separate Components (nav and rest) the rest should look like explained in my question. – Severin Koch Dec 19 '20 at 19:21
a new post would be better, start clean and include as much informatiosn and details possible. – tacoshy Dec 19 '20 at 19:39
https://stackoverflow.com/questions/65373908/how-to-make-div-100-of-display-height-when-i-have-to-exclude-the-navbar – Severin Koch Dec 19 '20 at 20:05

score 1 · Answer 2 · answered Dec 19 '20 at 15:28

A simple fix without modifying your code would be to set box-sizing: border-box; in your css file

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

Fixes the issue without modifying any other line. In addition, as user tacoshy said, there is no need to use position: fixed;. Achieved your result with this css code:

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

.take-page-height {
  height: 100vh;
  width: 100vw;
  padding: 1.5%;
}

.welcome-div {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  background-color: $card-bg;
}

score -1 · Answer 3 · answered Dec 19 '20 at 17:45

-1

Percentages are adapted to the device that we use. To get the absolute value, you can use another value e.g px, vh and vw, em, rem.

answered Dec 19 '20 at 17:45

rizfirsy

1
1

Only pixel are truely "absolute". EM and REM are semi-absolute as they depend on the declared font-size or the browsers default font size. While REM is the same EM just always using the Root EM (Body Font-Size). vh and vw is relative measurments that depend on the browser window dimensions. – tacoshy Dec 19 '20 at 19:43

Salaah Amin · Answer 4 · 2020-12-19T15:17:59.200

-2

If you want the outer div to the the size of the entire screen then.

.take-page-height {
  height: 100vh;
  width: 100vw;
  padding: 1.5%;
  position: fixed;
}

If you want to leave that border then you can try the following:

.take-page-height {
  height: calc(100vh - 1.5%);
  width: calc(100vw - 1.5%);
  padding: 1.5%;
  position: fixed;
}

But to be honest a much better way would be to do the following.

.take-page-height {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-div {
  width: 98.5%;
  height: 98.5%;
}

edited Dec 19 '20 at 15:17

answered Dec 19 '20 at 15:09

Salaah Amin

382
3
14

there is no need to use a `position: fixed;` also you miss the most vital part to not have a scrollbar. If you would use a runnable code snippet you see that you have a scroll bar as you didnt reset the body margins. – tacoshy Dec 19 '20 at 15:13
Yeah I was just amending the original working. Didn't think to add my own recommendation. Thank you. Edited the post. – Salaah Amin Dec 19 '20 at 15:18
1

use a code snippet, and run your code yoruself, you still didnt fix anything. The same problems are still present. You not countering any margins, paddings and borders. Last but not least, welcome div would be 97% width and height because the padding applies twice (left + right and top + bottom). However new issues are caused as soon as he starts using a border value. Thats why you better off by using `box-sizing: border-box;` – tacoshy Dec 19 '20 at 15:31

Why does 90% of a div-height, is different on two different Screens?

4 Answers4