如何让 div 在浏览器中占据 100% 的视口高度

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.

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 (ie have the exact viewport height) as long as you don't have any special width requirements.

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>

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>

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>

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

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

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>

Answer 8

Nothing seems to be the problem.

 #container { width: 100vw; height: 100vh; background: purple; } body { margin: 0px; } #innerDiv { height: 100px; background-color: red; width: 100vw; } #innerDiv1 { height: 100px; background-color: blue; width: 100vw; }

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