-1

I need div bottom to fill the remaining height of the PAGE, not a parent div

body, html {
  margin: 0px;
}

.top {
  background-color: green;
  width: 100px;
  height: 50px;
}

.bottom {
  background-color: red;
  width: 100px;
  height: 100%;
}
<div class="top"></div>
<div class="bottom"></div>
Frank
  • 2,109
  • 7
  • 25
  • 48
  • Give `min-height` to bottom , `height:100%` wont work – Athul Nath Mar 27 '18 at 10:45
  • when writing your question you get this question as the FIRST related quesiton ... so it's good to consider the related question before posting your question – Temani Afif Mar 27 '18 at 10:48
  • @Temani that related question makes use of a parent div, a flex container. But I did state in my question that I want to solve the solution without a parent div. Isn't that fine? – Frank Mar 27 '18 at 10:52
  • you have to read all the answer ;) not only the accepted one .. and as a side not you have a parent container here and it's called the body – Temani Afif Mar 27 '18 at 11:09
  • @Temani Ok will do but I can't use the body. This is for an angular program with multiple components – Frank Mar 27 '18 at 12:32

2 Answers2

2

You can use calc with vh to calculate the page's 100% height minus the 50px from the top DIV.

Take a look at this snippet:

body, html {
  margin: 0px;
}

.top {
  background-color: green;
  width: 100px;
  height: 50px;
}

.bottom {
  background-color: red;
  width: 100px;
  height: calc(100vh - 50px);
}
<div class="top"></div>
<div class="bottom"></div>
Koby Douek
  • 16,156
  • 19
  • 74
  • 103
-1

you can try the code below, but careful, its CSS3 and may not fully supported. See https://caniuse.com/#search=calc

Alternative: With Javascript every "normal" browser will be supported, b

body, html {
  height: 100%;
  margin: 0px;
}

.top {
  background-color: green;
  width: 100px;
  height: 50px;
}

.bottom {
  background-color: red;
  width: 100px;
  height: 100%;
  height: -webkit-calc(100% - 50px);
  height: calc(100% - 50px);
}
<div class="top"></div>
<div class="bottom"></div>
Runggaldier Armin
  • 1
  • 3