Question

我正在创建一个用户可调整大小的GUI窗口，其中包含一个通过新元素获得高度的标题，一个具有静态高度的页脚，以及介于两者之间的间隔自动占据其余高度。我尝试使用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页脚元素居中

2 个答案: