0

The code below is a simple page that expects an scrollable content (called red) on top of a fixed footer (called green):

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.red {
  background-color: red;
  overflow-y: scroll;
}

.green {
  background-color: green;
  overflow-y: none;
}
<div class="container">
  <div class="red">
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
  </div>
  <div class="green">
    <p>FOOTER LINE 1</p>
    <p>FOOTER LINE 2</p>
  </div>
</div>

The code is simple, but my green footer is scrolling together with the content.

How can I fix my CSS code to keep my green footer fixed on the bottom of the screen?

[EDIT] The suggested duplicate does not solve my problem, as it requires me to specify a footer height. I need the footer to have its height according to its content, and the remaining space on top to show the scrollable content.

Mendes
  • 17,489
  • 35
  • 150
  • 263
  • if you think the duplicate doesn't solve your issue, explain why by editing your old question. No need to repeat it because it will get closed the same – Temani Afif Jul 17 '19 at 12:50
  • where in the duplicate you see *it requires me to specify a footer height*?. – Temani Afif Jul 17 '19 at 12:56
  • I've deleted the old one and posted a new version of it. I've also edited the current one to show that the duplicated links does not solve the problem as all requires me to determine the height of the footer. – Mendes Jul 17 '19 at 12:56
  • you have 2 issues (1) percentage height explained in the first duplicate (2) default body margin explained in the second one ---> you only need two line of code as detailed in the duplicate: https://jsfiddle.net/g85q0pes/ and no need to add any height to footer ... As a bonus I added a third duplicate that also show different ways to achieve this. – Temani Afif Jul 17 '19 at 13:01
  • "I am trying to set a
    to a certain percentage height in CSS", `height: 90% !important;`, `.box .row.footer { flex: 0 1 40px; }`... the approach is different...
     – Mendes Jul 17 '19 at 13:01
  • hmm, I am going to follow this one closely. Already 3 reopen votes even after a clear explanation of the duplicate with a working code. Let's wait for the 5 names to appear so I can ask each one of them individually. – Temani Afif Jul 18 '19 at 00:10

0 Answers0