javascript - 对于不同的屏幕，页脚未正确定位在页面底部

Question

当我在不同分辨率的屏幕之间切换时，页脚要么位于底线上方，要么位于底线下方，导致出现滚动条。我怎样才能用 CSS 解决这个问题？我已经尝试关注几篇文章，但我不确定我到底做错了什么。

react 代码:

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

这是一个简单的固定页脚(很难从您的帖子中判断您是否希望将其固定在底部)。要点是position: fixed、bottom: 0和容器上的padding。如果您不想修复它，只需将 fixed 替换为 absolute

此外，如果您可以使用 flexbox，则有一个 really nice solution here .

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

<div class="container">
  <ol>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ol>
</div>
<div id="footer">
</div>