How to make div occupy 100% of viewport height in browser

Question

I have a div tag and I realized that it is not filling 100% of the height as it should.

My code:

#container {
  width: 100vw;
  height: 100vh;
  background: purple;
}

body {
  margin: 0px;
}

<div id="container"></div>

<div id="container"></div>

What's happening?

Well, if I only have this code snippet above that I put the div to occupy 100% of the viewport of course! The problem is that I don't only have this code on my page, I have more things and I inserted this code section inside the body tag, a certain" place "inside the body tag, that is, I inserted some elements, and after these elements have this div, but it does not occupy, 100% of the viewport observe how it is

How is the result visually on your page?

I scrolled the page, but my div was still to occupy 100% of the entire viewport. Am I not correct? and if this was supposed to happen why isn't it happening?

Explanation: Guys, I discovered the problem but I don't know how to solve it, well, here's the thing, the div does not occupy 100% of the viewport when it has an element below the container div or above, look at this image and see:

And the code I used that made this happen:

My code HTML:

body {
  color: red;
  background: green;
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background: purple;
}

p {
  font-size: 20pt;
}

<div id="container"></div>
<p>ksksks</p>

What happens in the image above is the same problem that happens on my page, that is, the div only fills 100% of the viewport's height if it has no elements on the page, and I want to be able to make the height 100% of the viewport even with elements on the page.

Edit:

Well apparently I saw that there are a lot of answers, and most of them don't work or are explaining the error or presenting answers that don't solve the problem, other people suggested using position fixed which in fact solves the problem, but I don't want to have to do it this way , think that you have a chat because you would want it to have a scrolling bullet and it will be the chat that will occupy the entire viewport and not another div understand? This solution actually solves the problem, but I don't like jerry-rig.

I would like to know a more elegant way of doing it, for example my div container occupies 100% of the viewport but I don't want other elements to appear, I want the div container to overlap any element that should appear and I don't want to scroll the page.

Summary:

To summarize everything in a few words, the div should occupy 100% of the viewport and make sure that the body does not have a scroll and the page goes to the top, that is, regardless of which position on the page the user is in, I want the page to go to the top and disable the scroll, and without javascript preferably, I don't want to write too much javascript being possible to write in html and css :) I will take advantage of the reward in this answer to add this and ask for a solution to this problem.

Zuzana

Try .container, not #container. – Schurman

Also, your content is not in the div. – Schurman

@PeterNielsen why do yo uthink so? because of Bootstrap? – Ernaernald

@PeterNielsen "Also, your content is not in the div" - how does it matters? – Ernaernald

If the content is in the div, it will take the style of the div. If the content is not, then the content must shot up still, and so the div takes a screen's worth of space, while also displaying the paragraph. – Schurman

I edited and added images to better explain – Zuzana

I edited my question again because I saw that you edited it and changed it to a code that was not my original :( – Zuzana

Well, the explanation of why I want the div to occupy 100% of the screen is that I want to do a chat and I need to be able to make it occupy 100% of the viewport and for that I need to solve this problem, same is my question, because the problem is the same – Zuzana

Ah yes it's okay, sorry, I don't use this platform a lot – Zuzana

I want to be able to make the height 100% of the viewport even with elements on the page. --> So how do you want other elements to be placed on the page? – Treen

I'll put some button or something and style it but this button will have the function of closing the div, so I need the div to occupy 100% of the viewport, the rest I can do – Zuzana

The browser adds margin. If you take it out, it might work. – Geelong

If I understand you correctly you need to place every element inside of the one that is filling the entire viewport. – Carport

This is not it @Carport – Zuzana

@Gjsks do you want to make a chat application with options to close the chat at the bottom which would appear but won't alter the div's height(in that case you could use position fixed for that option pane). – Futrell

@Gjsks Is this happens in Chrome or Safari also? – Cooky

Answer 1

The problem has to do with the fact that the vh and vw units don't take the (added) scrollbar width/height into consideration. As long as the page isn't higher than the viewport, no scrollbar appears and 100vh will be exactly the height of the viewport and everything works as expected.

But as soon as there is more content below or above, a vertical scrollbar appears: Now the width: 100vw is wider than the window width minus the vertical scrollbar, so a horizontal scrollbar appears, and now the height: 100vh is higher than the window height minus the (horizontal) scrollbar.

I consider that a kind of bug, but that's the way it is - in most browsers, it seems. I posted this question a long time ago which basically covers the same issue: Problem using vw units when a vertical scrollbar appears (full-width elements in WordPress)

Addition/edit after comments:

There is no 100% safe solution, I would say. But one thing that helps to some extent is to not use 100vw for the width, but instead 100%, which does consider the (vertical) scrollbar. However, width: 100%; is the default for any block element anyway, so you can simply erase the width setting and only use height: 100vh, which will work (i.e. have the exact viewport height) as long as you don't have any special width requirements.

Rempe

a usefull solution for the vw: #33607065 – Amaro

Okay, but I read some answers but I didn't understand how I can solve this problem, any ideas? – Zuzana

@Gjsks please note the addition to my answer. – Rempe

Mudei este trecho de código: #container { width:100vw; height: 100vh; background:purple} for this #container {height: 100vh; background:purple; and the result is the same – Zuzana

could you write that in English? – Rempe

I change this code snippet #container { width:100vw; height: 100vh; background:purple} for this #container {height: 100vh; background:purple; and the result is the same – Zuzana

Answer 2

Please use the following meta tag inside your head tag

<meta name="viewport" content="width=device-width, initial-scale=1">

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      color: red;
      background: green;
      margin: 0;
      padding: 0;
    }
    
    #container {
      width: 100vw;
      height: 100vh;
      z-index: 1;
      background: purple;
    }
    
    p {
      font-size: 20pt;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <p>ksksks</p>
</body>

</html>

Theft

Answer 3

Based On your question you want the div to take up the space instead of the purple background right?

Css:

#container {
  width: 100vw;
  height: 100%;
  background: purple;
}

body {
  margin: 0px;
  
}

#innerDiv {
  height: 100vw;
  background-color: red;
  width: 100vw;

}

#innerDiv1 {
  height: 100%;
  background-color: blue;
  width: 100vw;
  
}

Html:

<div id="container">
</div>

<div id="innerDiv">Div #1</div>
<div id="innerDiv1">Div #2</div>

Democritus

Answer 4

You applied background purple color upto height of 100vh, if you want see purple fully you just add purple in body tag instead green or otherwise you want place div inside container .here is nothing problem.you just want to adjust your code

body {
  color: red;
  background: purple;
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  z-index: 1;

}

p {
  font-size: 20pt;
}

<div id="container"></div>
<p>ksksks</p>

Krumm

No friend, the goal is to make the div occupy 100% of the viewport. He put the purple background in the div so that people can view it better. – Goodloe

Answer 5

The simplest solution is to make use of viewport height(vh) and viewport width(vw) units to set the height and width of the block. this block/div will fill up the entire space in the browser window. Here is an example.

div.container {
    height: 100vh;
    width: 100vw;
}

make sure you have the viewport meta tag in your <head> as given

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Incase of a missing meta tag, the initial scale and zoom may misbehave. Also put your <p> inside the container div. Here is the working demo.

My code:

HTML, body {
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  background: purple;
}

p {
  height: 100%;
  width: 100%;
  background-color: rgba(255,255,255, .8);
}

<div id="container"></div>

<div id="container">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

Impignorate

The p tag still occupies friendly space. I will offer 150 reward points for those who get the answer to this question right because apparently they have almost the same problem in all the answers – Goodloe

@Dakota, check the snippet added. Tested solution and working fine. hope it help. – Impignorate

Answer 6

It is just a workaround, I usually used it as mobile hamburger menu with full screen. You have to be careful because it force to cover bfull page, it will hide all element if there is any other element already exists on the page.

.container {
    # it make the container always on the page regardless any element or window margin
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    height: 100vh;
    width: 100vw;
}

Cooky

Answer 7

I have tried it with those codes and it seems like it's working, You can check them:

body {
  color: red;
  background: green;
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background: purple;
}

p {
  font-size: 20pt;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>

  <div id="container"></div>
  <p>ksksks</p>
</body>

</html>

Grosswardein