Html 当我使浏览器变小时，页脚和页眉不会调整大小并重叠

当我将浏览器窗口缩小一点时，登录页面的页眉和页脚没有调整大小，我遇到了这个问题：

body {
        position: relative;
        margin: 0;
        background: #FBFCFE;
        font-family: Arial, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #2B2B2B;
        display: flex;
        min-height: 100vh;
        flex-direction: column;
    }
.loginPage {
    max-height: 1150px;
}
.loginPageHeader {
    clear: both;
    background-color: #517084;
    padding-top: 25px;
    height: 125px;
    z-index: 3;
}
.loginPageSignInForm {
    position: absolute;
    width: 600px;
    height: 300px;
    top: 40%;
    left: 41%;
    margin: -100px 0 0 -150px;
}
#loginPageFooter {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: left;
    background: #517084;
    padding: 10px 15px 20px 15px;
    font-size: 12px;
    display: block;
    vertical-align: middle;
}

.loginPageHeader

、

.loginpagesignform

和

loginPageFooter

都在

.loginPage

当浏览器较小且

signin

表单未在中心对齐时，页眉和页脚有点大。

登录到主页
{errorLogin}
登录

LoginPageFooter组件：

return (
            <div id="loginPageFooter">
                <div className="col-lg-4">
                    <div id="loginPageFooterText">
                        sdafadsfdsfasf
                    </div>
                    <div className="loginPageLinks">
                        <a className="footerLink"></a>
                        <a className="footerLink"></a>

                        <a className="footerLink"
                            >Y</a>
                        <a className="footerLink"></a>

                    </div>
                </div>
                <div className="col-lg-5"></div>
                <div className="col-lg-3" style={styles.textAlignRight}>
                    <div id="contactSupport">NEED HELP? </div>
                    <div><a href="j.html"
                        title="Contacts &amp; Procedures">Customer Support</a>
                            : 1-444444444</div>
                    <div><a href="mailto:2342314@sdafsd.com"
                        title="&amp; Procedures">Email</a>
                            : 2342314@sdafsd.comm</div>
                </div>
            </div>
        );

返回(
SDAFADSFASF
: 1-444444444
: 2342314@sdafsd.comm
);

使用vh属性。它表示视口高度，是一个百分比。所以高度：90vh表示视口高度的90%。这适用于大多数现代浏览器

例如

你可以放弃你身体上剩下的100%愚蠢的东西

如果你有一个标题，你也可以做一些有趣的事情，比如使用CSS中的calc函数来考虑它

例如

这将为您提供100%的视口高度，减去标题的50px

---

希望有帮助

你的HTML在哪里？如果没有您正在使用的代码，我们如何帮助您？请提供您的代码的完整内容problem@DanieleFois done@JoseAPL添加。根据您的CSS，您的

.loginPage

是

静态的

，即它有

位置：静态

您的

#loginPageFooter

具有

位置：绝对即，它不是放在
.loginPage
中，而是放在HTML元素中。此外，您还添加了
z-index:3
到您的
.loginPageHeader
位置：static默认情况下，因此
z-index
不会有任何影响。请将这些维度精确放置在何处？我确实有
100vh
在
body
中，然后将vh放在页眉和页脚中，但使用任何百分比，然后使用100vw，还可以尝试最大高度：100vh；
return (
            <div id="loginPageFooter">
                <div className="col-lg-4">
                    <div id="loginPageFooterText">
                        sdafadsfdsfasf
                    </div>
                    <div className="loginPageLinks">
                        <a className="footerLink"></a>
                        <a className="footerLink"></a>

                        <a className="footerLink"
                            >Y</a>
                        <a className="footerLink"></a>

                    </div>
                </div>
                <div className="col-lg-5"></div>
                <div className="col-lg-3" style={styles.textAlignRight}>
                    <div id="contactSupport">NEED HELP? </div>
                    <div><a href="j.html"
                        title="Contacts &amp; Procedures">Customer Support</a>
                            : 1-444444444</div>
                    <div><a href="mailto:2342314@sdafsd.com"
                        title="&amp; Procedures">Email</a>
                            : 2342314@sdafsd.comm</div>
                </div>
            </div>
        );

div {
  height: 90vh;
}

div {
  height: calc(100vh - 50px);
}