Flex-box Footer Element Centered

Question

I'm making a user-resizable GUI window with a header that gains height through new elements, a footer with static height, and a spacer in between that automatically takes up the rest of the height. I attempted using this answer, but the footer ended up vertically-centered. Picture:

If anyone knows why off the top of their head, it would be greatly appreciated. The element is being added to the page with javascript so the code is pretty messy. Thank you for your time.

The CSS is exactly the same as the answer in the link I provided. — Tom Burris, Jun 05 '16 at 09:26
You can set height to 100% and use a margin to make the footer sticky. — flux, Jun 05 '16 at 09:50
The window is resizable, and the content in the heading is dynamic, so that would be fairly difficult. Isn't there a simpler solution using CSS? — Tom Burris, Jun 05 '16 at 09:53

score 1 · Answer 1 · answered Jun 05 '16 at 19:10

1

What about the following:

<body>
<header class="header"></header>
<main class="spacer"></main>
<footer class="footer"></footer>
</body>

.

html {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.spacer {
    flex: 1;
}

answered Jun 05 '16 at 19:10

seahorsepip

4,519
1
19
30

For some reason that forces the spacer and footer to the right of the header, out of view. – Tom Burris Jun 05 '16 at 20:54

score 0 · Accepted Answer · answered Jun 10 '16 at 21:24

I still don't know what the issue was, but I made a solution using the css calc() function.

HTML:

<div id="myWindow">
    <div id="header">
        Header
    </div>

    <div id="footer">
        <div id="subHeaderContainer">
            <div id="subHeader">
                Sub Header
            </div>
        </div>

        <div id="subFooter">
            Sub Footer
        </div>
    </div>
</div>

CSS:

#myWindow {
  width: auto;
  height: auto;
  resize: both;
  border: 2px solid black;
  overflow:hidden;
}

#header {
  height: 20px;
  background-color: grey;
}

#footer {
  width:100%;
  height: calc(100% - 20px);
}

#subHeaderContainer {
  width:100%;
  height: calc(100% - 30px);
}

#subFooter {
  width:100%;
  height:30px;
}

Flex-box Footer Element Centered

2 Answers2