How to set height of DIV to bottom of viewport without Javascript?

Question

I'm working on a web application that has a general layout like this:

The main content area extends beyond the bottom of the viewport. There is a side navigation menu that users can open by clicking a button. My question is, is there a clever way to have the side nav height extend to the bottom of the viewport? I know I can do this with javascript where I'd have to calculate the height of the viewport, and then subtract the header and subheader heights...but wondering if there is an easier way that I'm missing?

See - http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1 — Paulie_D, Aug 12 '16 at 15:49
Good link @Paulie_D...I didn't think to use a flexbox approach. — , Aug 12 '16 at 22:23

andreas · Answer 1 · 2016-08-12T16:04:14.277

Here's an example using flex property. If you don't know layouting with flex, here's a great example. Just set the container to display: flex; and the side nav to flex: 0 auto;:

.header,
.subheader {
  background: #5b5;
  width: 200px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
}
.header {
  background: #5b5;
}
.subheader {
  background: #292;
}
.content {
  width: 200px;
  margin: 0 auto;
  display: flex;
}
.nav {
  flex: 0 auto;
  width: 25%;
  background: #55b;
  float: left;
  height: inherit;
}
.main {
  width: 75%;
  background: #449;
  float: right;
}

<div class="header">Header</div>
<div class="subheader">Subheader</div>
<div class="content">
  <div class="nav">side nav</div>
  <div class="main">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

I can achieve same layout as in your example if I just set my nav `div` to `height: 100%`, in which case it will be the same height as the main content `div`. I just want the height of the nav to extend to the bottom of the viewport, not the bottom of the main content area. — , Aug 12 '16 at 22:26

score 0 · Answer 2 · answered Aug 12 '16 at 15:52

0

You can use calc() and subtract header and subheader heights from 100vh. For example:

height: calc(100vh - 200px);

answered Aug 12 '16 at 15:52

Bartłomiej Jacak

26
4

This won't work for me because I don't have fixed heights for the header and subheader. – Aug 12 '16 at 22:28

score 0 · Answer 3 · answered Aug 12 '16 at 15:52

0

If the height of the header and subheader are fixed you could try something like this. Let's say for instance they are both 50px in height.

#side-nav { 
   height: calc(100vh - 100px) 
}

answered Aug 12 '16 at 15:52

F. Van Damme

1
2

The header and subheader heights are not fixed. – Aug 12 '16 at 22:28

score 0 · Answer 4 · answered Aug 12 '16 at 17:27

Hey I can help you with a solution you can fix this template with css alone, Its better to use css rather than js.

SOLUTION

The html is..

<html>
    <link rel="stylesheet" href="style.css"/>
    <body>
    <header class="border"><h1>Header</h1></header>
    <section class="sub-header border"><h2>Sub header</h2></section>
    <div class="side-menu border">
      <div class="menu-head"><h3>Menu heading</h3></div>
    <div class="menu-items ">
        <p>Menu items 1</p>
        <p>Menu items 2</p>
        <p>Menu items 3</p>
        <p>Menu items 4</p>
        </div>  
    </div>
    <div class="main-content border">
     <p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
    </div>
    </body>
</html>

CSS is..

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    overflow: auto;
}
.border{
    border: 1px solid #000;
}
header{
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #ea4242;
}
.sub-header{
    text-align: center;
    position: fixed;
    left: 0;
    top: 39px;
    width: 100%; 
    background: #d46b6b;
}
.side-menu{
width: 240px;
    position: fixed;
    left: 0;
    top: 68px;
    height: 89%;


}
.menu-head{
    width:100%;
    text-align: center;
    padding: 12px 0;
    background: #96a2ff;
}
.menu-items{
    height: 100%;
}
.menu-items p{
    padding: 20px 10px;
    border-bottom:1px solid #777; 
}
.main-content{
    height: 1900px;
    width: calc(100% - 252px);
    margin-left: 240px;
    margin-top: 66px;
    background: #fdefa9;
    padding: 0 0px 0 10px;    
}

Try this it will suits you the best way

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    overflow: auto;
}
.border{
    border: 1px solid #000;
}
header{
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #ea4242;
}
.sub-header{
    text-align: center;
    position: fixed;
    left: 0;
    top: 39px;
    width: 100%; 
    background: #d46b6b;
}
.side-menu{
width: 240px;
    position: fixed;
    left: 0;
    top: 68px;
    height: 89%;
    overflow:auto;
overflow:auto;

    
}
.menu-head{
    width:100%;
    text-align: center;
    padding: 12px 0;
    background: #96a2ff;
}
.menu-items{
    height: 100%;
}
.menu-items p{
    padding: 20px 10px;
    border-bottom:1px solid #777; 
}
.main-content{
    height: 1900px;
    width: calc(100% - 252px);
    margin-left: 240px;
    margin-top: 66px;
    background: #fdefa9;
    padding: 0 0px 0 10px;    
}

<header class="border"><h1>Header</h1></header>
    <section class="sub-header border"><h2>Sub header</h2></section>
    <div class="side-menu border">
      <div class="menu-head"><h3>Menu heading</h3></div>
    <div class="menu-items ">
        <p>Menu items 1</p>
        <p>Menu items 2</p>
        <p>Menu items 3</p>
        <p>Menu items 4</p>
        </div>  
    </div>
    <div class="main-content border">
     <p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
    </div>

Joel Hernandez · Answer 5 · 2016-08-12T16:34:54.583

-1

Yves, normally we do this:

#elem{
    height: 100%;
}

However, this won’t work unless we add a height of 100% to the body and html as well, which isn’t very elegant and might break the rest of your design. With vh that’s pretty easy. Just set its height to 100vh and it will always be as tall as your window.

#elem{
    height: 100vh;
}

This is perfect for those full screen hero images that seem to be trendy these days.

Reference: http://tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units/

Hope this helps!

edited Aug 12 '16 at 16:34

answered Aug 12 '16 at 15:46

Joel Hernandez

2,195
1
13
17

2

Whilst this may theoretically answer the question, [**it would be preferable**](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes – Paulie_D Aug 12 '16 at 15:48
1

@JoelHernandez - not sure this would work for me. Setting my nav `div` to 100vh would set height to 100% of viewport, but I just want height to be from the top of its normal layout position to bottom of viewport. I think flexbox as per @Paulie_D or javascript will be best solutions. – Aug 12 '16 at 22:32

How to set height of DIV to bottom of viewport without Javascript?

5 Answers5