Is there css height: rest property?

Question

If you have an html document that goes like this:

<body>
  <div id="top"></div>
  <div id="rest"></div>
</body>

and I give the "top" div a height of 40px, is there a way to give "rest" div the rest of the height of the body in css. I know it's possible in Javascript like this

function derest(){
var bodyheight = window.getComputedStyle(document.getElementsByTagName('body')[0], null).height;

bodyheight = bodyheight.substring(0, bodyheight.length - 2);

var topheight = window.getComputedStyle(document.getElementById('top'), null).height;

topheight = topheight.substring(0, topheight.length - 2);

restheight = bodyheight - topheight;

document.getElementById("rest").style.height = restheight;

}

but this takes a lot of time, so is there a better way to do this?

This is possible with Flexbox. (More specifically `flex-grow: 1`.) Have a nice Google search. — Bram Vanroy, Jun 03 '17 at 10:24

score 1 · Accepted Answer · answered Jun 03 '17 at 10:26

1

You could just use pure CSS

#top{
  height:40px;
  background:green;
}
#rest{
  height:calc(100% - 40px);
  background:red;
}
body,html{
  height:100%;
  margin:0;
  padding:0;
}

answered Jun 03 '17 at 10:26

GM-Script-Writer-62850

373
4
12

score 0 · Answer 2 · answered Jun 03 '17 at 10:27

You can use flex to allow the #rest to stretch to fill the height:

html {
  height: 100%;
  margin:0;
  padding:0;
}
body {
  height: 100%;
  margin:0;
  padding:0;
  display: flex;
  flex-direction: column
}
#top {
  height: 40px;
  background: red;
}
#rest {
  flex: 1 1 auto;
  background: blue;
}

<div id="top"></div>
<div id="rest"></div>

score 0 · Answer 3 · answered Jun 03 '17 at 10:28

If the container is display: flex then you can set an element to grow (with flex-grow) to fill the remaining space.

html,
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  background-color: #aaf;
}

main {
  background-color: #afa;
  flex: 1 0 auto;
}

footer {
  background-color: #faa;
}

<header>
  Header
</header>
<main>
  Main
</main>
<footer>
  Footer
</footer>

Diego N. · Answer 4 · 2017-06-03T10:32:28.177

-1

You can use:

#top {
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 40px;
}

#rest {
 position: fixed;
 top: 40px;
 left: 0px;
 width: 100%;
 height: calc(100% - 40px);
}

or even use padding-top 40px instead of doing fixed the #rest div

https://jsfiddle.net/lonking/L5mwd6r5/

edited Jun 03 '17 at 10:32

answered Jun 03 '17 at 10:26

Diego N.

562
3
10

why downvote without reason? it works – Diego N. Jun 03 '17 at 10:29

Is there css height: rest property?

4 Answers4