Tom Burris Tom Burris - 2 years ago 161
HTML Question

Flex-box Footer Element Centered

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:

enter image description here

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.

Answer Source

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


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

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

        <div id="subFooter">
            Sub Footer


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

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

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

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

#subFooter {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download