Question 45365 in Html Question posted in
Some basic documentation can be found here.

How can I fill remaining space but have minimum height in a flex layout? – Html

My goal is to show the header and div in the current window height, leaving the footer hidden until the user scrolls.

I am trying to figure out a way to make div have a minimum height, so that the footer starts to show. However, when I do this the footer ends up going overtop of my div.

How can I give my div a minimum height but still make sure that the content doesn’t overlap each other?

As you can see, footer goes over top of div.

body, html {
  height:100%;
}

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

header {
  border:1px solid red;
}

footer {
  border: 1px solid blue;
  background-color:blue;
}

div {
  background-color:#eee;
  flex: 1;
  min-height:200px;
}
<section>
  <header>header</header>
  <div>content</div>
</section>

<footer>footer</footer>
Tags:

3

Answers


  1. 0 
    body, html {
  height: 100%;
}

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

header {
  border: 1px solid red;
}

footer {
  border: 1px solid blue;
}

div {
  background-color: #eee;
  flex: 1;
  min-height: calc(100vh - (header + footer));
  margin-bottom: 20px; /* adjust this value to match the height of your footer */
}
    <section>
  <header>header</header>
  <div>content</div>
</section>

<footer>footer</footer>
    Login or Signup to reply.
  2. 0

    I’m confused by your question and what you’re trying to achieve.

    You start saying you want the footer to be hidden until the user scrolls, which is what is already happening.

    Then you say you want the start of the footer to show but without overlapping the div? In that case just make the height of the <section> less than 100%, otherwise there is no way to view the footer without it overlapping your div content.

    body, html {
  height:100%;
}

section {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  border:1px solid red;
}

footer {
  border: 1px solid blue;
  background-color:blue;
}

div {
  background-color:#eee;
  flex: 1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
    <section>
  <header>header</header>
  <div>
    <span>content top</span>
    <span>content bottom</span> 
  </div>
</section>

<footer>footer</footer>
    Login or Signup to reply.
  3. 0

    I have tried a few things that came to my mind, but haven’t found a solution that contains the 200px min-height for the div. However, as a workaround, you could apply a min-height to body, with a value that approximately equals 200px plus the height of header and footer. I used 240px in my snippet below, but you can adjust that value as needed. At least that way you don’t get that overlap of the footer.

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

header {
  border:1px solid red;
}

footer {
  border: 1px solid blue;
  background-color:blue;
}

div {
  background-color:#eee;
  flex: 1;
}
    <section>
  <header>header</header>
  <div>content</div>
</section>

<footer>footer</footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search