CODEWITHSUNDEEP
htmlcss
zeus
zeus

Reputation: 13367

Last div fill remaining height

I want to make the last div in my body to fill the remaining space but I'm having some trouble. I have this HTML:

<body>
  <div class="content"></div>    
  <div class="footer"></div> 
</body>

and this CSS:

body, html {
    height: 100%;
}

.content {
  height: 100px;
  background-color: red;
}

.footer {
  height: 100%;
  background-color: #ccc;
}

Here is a JSFiddle.

It's not working because a vertical scrollbar is appearing.

Any idea how I can do this?

Upvotes: 0

Views: 591

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

You can make it a calculation:

.footer {
  height: calc(100% - 100px);
}

Also, add this style:

body,html {
  margin: 0px;
}

Working Fiddle #1

If the height of content is unknown, you can use a flexbox solution:

body, html {
  height: 100%;
  width: 100%;
  margin: 0px;
  display: flex;
  flex-direction: column;
}

.footer {
  flex: 1;
}

Working Fiddle #2

Upvotes: 1

Related Questions