-3

我正在制作一个用户可调整大小的 GUI 窗口，其标题通过新元素获得高度，页脚具有静态高度，中间有一个自动占据其余高度的间隔。我尝试使用这个答案，但页脚最终垂直居中。图片：

在此处输入图像描述

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

4

2 回答 2

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;
}
于 2016-06-05T19:10:31.263 回答
0

我仍然不知道问题是什么，但我使用 csscalc()函数做了一个解决方案。

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;
}
于 2016-06-10T21:24:36.417 回答