CODEWITHSUNDEEP
htmlcss
Apalabrados
Apalabrados

Reputation: 1146

Sticky footer position in a two column layout

This post is an updated version of this one. I will try to explain my issue better than I did in the other post. The issue is related to the position of the footer in two situations.

Situation 1:

enter image description here

The first situation is when the content of the body is not enough to fill the height of the browser, so the footer must be fixed at the bottom of the browser.

Situation 2:

enter image description here

The second situation is when the height of the content of the body is higher and overflow. Here I do not wish the footer be fixed at the bottom, so the footer must be after the bottom of the content.

The first approach and link to the Fiddle example is in the above link from the other post.

By the way. I know this can be accomplished using Javascript, but I would like to use only CSS rules. Any idea?

Upvotes: 1

Views: 507

Answers (1)

Stickers
Stickers

Reputation: 78686

I suggest to use nested flexbox, example below:

jsFiddle

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}
.container {
  flex: 1;
  display: flex;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<div class="header">header</div>
<div class="container">
  <div class="sidebar">sidebar</div>
  <div class="content">
    <div class="main">
      conent<br>conent<br>conent<br>conent<br>conent<br>
      conent<br>conent<br>conent<br>conent<br>conent<br>
      conent<br>conent<br>conent<br>conent<br>conent<br>
      conent<br>conent<br>conent<br>conent<br>conent<br>
     </div>
    <div class="footer">footer</div>
  </div>
</div>

Upvotes: 1

Related Questions