How do I extend a DIV to the end of the screen?

Question

How do I extend a DIV to the end of the screen?

Navigation

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

1

I've created a main div to hold all elements of the page. Inside it I have 3 other divs : 1 menu bar, 1 sidebar, 1 content area.

HTML:

<div class="principal">
  <div class="barra_menu">
    Barra de menu
  </div>
  <div class="menu_lateral">
    <!--Como se estende esse div até o fim da página/elemento pai-->
    Menu lateral:<br>.<br>.<br>.
  </div>
  <div class="area_conteudo">
    Area de conteudo:<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
  </div>
</div>

CSS:

.principal{background-color:red;height:100%;}
.barra_menu{background-color:gray;widht:100%;}
.menu_lateral{background-color:blue;width:30%;float:left;}
.area_conteudo{background-color:green;width:70%;float:left;}

I want the side menu to extend from where it is to the bottom of the page, but I do not know the solution.

I would like to get a solution based on HTML / CSS only without using absolute positioning.

Here is a visual example of what I want to do: link

html css

asked by anonymous 05.01.2016 / 20:00

3 answers

How to set data in the localStorage Increase the menubutton box

score 1 · Answer 1

I recommend using the Sticky Footer technique if compatibility with older browsers is required.

Your HTML structure looks like this:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
.side-left{
  float:left;
  width: 30%;
}
.content{
  float:left;
  width: 70%;
}

<div class="page-wrap">
  <div class="side-left">
    Menu
  </div>
  
  <div class="content">
    Content!
  </div>
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

score 0 · Answer 2

0

You can use the property:

1vh (viewport height) = 1% of viewport height

It will look like this

min-height:100vh;

05.01.2016 / 20:06

score 0 · Answer 3

First you should give body a

height: 100%

And to your right-side menu, the same. It would look like this:

body{
   height: 100%
}
.menu_lateral{
   height: 100%;
}

The body has a default height: auto

Because of this the body will extend to the size of the largest element. Giving a height: 100% this will be undone and it will have the screen size.