Question

当我在不同分辨率屏幕之间切换时，页脚会位于底线或更低的位置，导致滚动条出现。我怎么能用CSS修复这个问题？我已经尝试过几个帖子了，但我不确定我到底做错了什么。

反应代码：

return (
            <div>
                <div className="container">
                    <div id="logo">
                        <img src={require('../../images/vidn_logo.png')} />
                    </div>
                    {heading}
                    <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" style={{marginTop: '20px'}}>Log In</button>
                    </form>
                </div>
                <Footer />
            </div>
        );

页脚组件

const Footer = React.createClass({

    render: function() {
        return (
            <div id="footer">
                <div id="footerText">
                    <a href="">Privacy</a>All rights reserved<br />
                    <a href=""
                        title="Support Contacts &amp; Procedures">Customer Support</a>
                </div><br />
            </div>
        );
    }
});

的CSS ：

 html {
        height: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
        box-sizing: inherit;
        margin: 0;
        padding: 0;
    }
    body {
        position: relative;
        margin: 0;
        background: #FBFCFE;
        font-family: Arial, Verdana, Helvetica, sans-serif;
        font-size: 11px;
        color: #2B2B2B;
        height: 100%;
    }
    div {
        display: block;
    }
    .container {
        width: auto;
        height: 100%;
        padding: 60px 0 100px;
        text-align: center;
    }
    #footer {
        margin-top: -100px; /* negative value of footer height */
        height: 100px;
        clear:both;
        color: #3f4209;
        text-align: right;
        background: #ccc9c9;
    }
    #footer div#footerText {
        width: 99%;
        padding: 10px 10px;
    }

Answer 1

这是一个简单的固定页脚（如果你想将它固定在底部，很难从帖子中分辨出来）。主要要点是crossed_columns，position: fixed和容器上的填充。如果您不想修复此问题，只需将bottom: 0替换为fixed

即可

此外，如果您可以使用flexbox，则会有really nice solution here。

＆＃13;

absolute

＆＃13;

body {
    position: relative;
}
.container {
    height: 100%;
    padding-bottom: 100px;
}
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: #ccc9c9;
}

＆＃13;

对于不同的屏幕，页脚未正确放置在页面底部

1 个答案: