Set the correct height dimension of a three-row-layout

Question

How can I create three rows with the following height:

The header should be 70px
Main should be 30% of the screen
Footer should be taking the rest of the space

body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
header {
  background-color: red;
  height: 70px;
  z-index: 10;
  position: relative;
}
main {
  background-color: green;
  height: 30%;
  position: relative;
}
footer {
  background-color: #ddd;
  /* height? */
}

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

This looks like a duplicate of this question: http://stackoverflow.com/questions/7202427/make-footer-take-remianing-bottom-space-using-css — resolute_coder, May 06 '15 at 22:02
@resolute_coder – That question is WAY out of date. I'd say this warrants a new answer. — Josh Burgess, May 06 '15 at 22:03

score 1 · Accepted Answer · answered May 06 '15 at 22:03

1

you can use

width: calc(70% - 70px);

on the footer, see browser support here http://caniuse.com/#feat=calc

answered May 06 '15 at 22:03

Victor Radu

2,262
1
12
18

Set the correct height dimension of a three-row-layout

1 Answers1