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

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

Answer 2

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

Answer 3

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

Answer 4

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