Flex-box 页脚元素居中

Question

我正在制作一个用户可调整大小的 GUI window，其中包含一个通过新元素增加高度的页眉、一个具有静态高度的页脚以及一个自动占据其余高度的间隔符。我尝试使用 this answer，但页脚最终垂直居中。图片：

如果有人知道为什么会突然想到，将不胜感激。该元素正在使用 javascript 添加到页面，因此代码非常混乱。谢谢你的时间。

Answer 1

以下情况如何：

<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;
}

Answer 2

我仍然不知道问题出在哪里，但我使用 css calc() 函数解决了问题。

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 页脚元素居中

Flex-box Footer Element Centered

html

css

dynamic-css