How to make a div occupy the whole page?

Question

How to make a div occupy the whole page?

Asked 7 years, 2 months ago

Viewed 24,725 times

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 you put these qualities in css, the div doesn’t get 100%, it’s only the size of the <ul> and with an upper and lateral-left spacing.

Welcome to Stackoverflow! Please explain the problem better, and if possible include a example of code that reproduces what is happening, because your question is not noticeable. See Help Center How to Ask.

– Taisbevalle

2017/04/10 at 15:14
You’ve already defined the heights of the elements html and body also?

– Woss

2017/04/10 at 15:21
Not yet Anderson, I am now learning html and css and this is my first project alone that I am creating. So far so: .longBar
 {
 width: 250px;
 height: 100%;
 background-color: rgb(66, 79, 90);
 }

– GenSkywalker

2017/04/10 at 15:25
Set the widget height to 100% makes it fit the height of its parent element. If it does not occupy the entire screen as well, it will not work as expected. Set the heights of html and body as 100% also and will have some result. Something like html, body { height: 100%; }.

– Woss

2017/04/10 at 15:31
Well said Anderson!. I defined body { height: 100%; postion: absolute } and my div longBar put height: 100%; position: relative. It worked! Thank you!

– GenSkywalker

2017/04/10 at 15:37

2 answers

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Lennon S. Bueno • **2,182** points · Answer 1 · 2017-04-10T16:17:08+00:00

When you set height in percentage it is based on the parent elements, ie, html and body as Anderson spoke 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>

Note that now the body is 100% tall. Now all children of body can be 100% tall including the .menu set colors to be more understandable, never forget that the child elements are based on the parent element.

Relative and absolute positions are not required for this example.

by Leon Freire • **2,375** points · Answer 2 · 2017-04-10T18:38:41+00:00

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

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 measures previously defined for the body nor pro html.