search

kir-dev / konyha

https://konyha.kir-dev.sch.bme.hu/
2 stars 0 forks source link

Solve overlapping main and footer on front page #16

Closed triszt4n closed 4 years ago

triszt4n commented 4 years ago

I've just made a workaround for our overlapping divs on the front page. I know, putting a placeholder div with h-16 class (huge height) is not the best solution, so if some css guru could help me, go on! This is my solution in the end.

OmTheTurtle commented 4 years ago

If the goal is to push the footer down even when the content doesn't fill the viewport, you can try:

If the html looks something like this:

<body>
  <navbar>
  </navbar>
  <main>
    <!-- content goes here -->
  </main>
  <footer>
  </footer>
</body>

Then the css should be:

body {
  display: flex;
  flex-direction: column;
}

body main {
  flex: 1;
}

This is what we use in tanulo and schorpong projects.

triszt4n commented 4 years ago

Used @OmTheTurtle 's idea, with two levels of flex columns: one on the body and it's children (navbar and container panel), one on the container panel and it's children (alert-div, main and footer). Thanks for that!