Question

我在登录页面遇到此问题，当我使浏览器窗口变小时，页眉和页脚不会调整大小：

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，.loginPageSignInForm和loginPageFooter位于.loginPage内当浏览器较小且signin表单未在中心对齐时，页眉和页脚有点大。 Screenshot

<div className="loginPage">
                <div className="loginPageHeader col-lg-12">
                    <div className="floatleft secservices">
                        <img src={require('../../images/some-image.png')}/>
                    </div>
                </div>
                <div className="loginContainer"></div>
                <div className="loginPageSignInForm">
                    <h2 className="form-signin-heading">Log in to Home</h2>
                    {errorLogin}
                    <form className="form-signin" onSubmit={this.formSubmit}>
                        <input onChange={this.setEmail} type="email" className="login-form-control"
                            autoComplete="email" placeholder="Email" required></input>
                        <input onChange={this.setPass} type="password" className="login-form-control"
                            autoComplete="new-password" placeholder="Password" required></input>
                        <button className="btn btn-lg btn-primary btn-block"
                            type="submit">Log In</button>
                    </form>
                </div>
                <LoginPageFooter />
            </div>

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

Answer 1

使用vh属性。它表示视口高度，是一个百分比。因此高度：90vh意味着视口高度的90％。这适用于大多数现代浏览器。

EG。

div {
  height: 90vh;
}

你可以放弃身上剩下的100％愚蠢的东西。

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

EG。

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

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

希望它有所帮助！

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

1 个答案: