How to make a div occupy the entire page? [duplicate]

Question

How to make a div occupy the entire page? [duplicate]

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I want to create a side menu and its format will be widht: 250px and height: 100% leaning on the left corner of the browser, but when putting these qualities in css, the div is not 100 <ul> and upper and left-side spacing.

html css

asked by anonymous 10.04.2017 / 17:13

2 answers

Doubt - MVC system view PHP does not return the second parameter via URL in Google Chrome

score 1 · Answer 1

When you set height in percentage, it is based on the parent elements, that is, html and body as Anderson said in the comments. see an example:

body, html{
  height: 100%;
}

body{
  background-color: blue;
}

.menu{
  background-color: red;
  height: 100%;
  width: 250px;
 }

<html>
  <body>
    <div class="menu">
    
    </div>
  </body>
 </html>

Notice that%% of% has height now 100%. Now all children of body can have height 100% including body set colors to be more understandable, never forget that child elements are based on the parent element.

Regarding absolute and relative positions is not necessary for this example.

score 0 · Answer 2

Good afternoon! I think the best way to achieve what you want with height occupying the entire screen is to set the height of your div to "vh" = Viewport Height, translating: Height of your Window.

Give this value to your div to have the full height of your window:

.longBar {
    width: 250px;
    height: 100vh; /* Note a medida */
    background-color: rgb(66, 79, 90);
}

The advantage of this method is that it does not depend on predefined measures for body nor pro html .