页脚上方页面底部的<hr />

Question

我试图将此<hr>和文本放在页面底部，因此，即使我在浏览器中打开开发者工具，页面加载后也将停留在页面底部。

>

它看起来像这样：

我的代码当前如下：

<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year</p>
    </footer>
</div>

我尝试将hr和footer包装在div中，给它id和css style

#footer {
position: absolute;
bottom: 0px;
}

但会导致<hr>从当前宽度缩小到其下方的文本日期宽度。如果我在CSS中添加width: 100%，则<hr>会一直延伸到屏幕的右侧，同时我希望它与当前宽度相同。我也尝试过给<div> class="container"换行，这几乎可以完成工作，但是随后它使文本稍微向右移动，因此它与文本字段和提交按钮不对齐。我该怎么解决？

Answer 1

HTML：

<div class="container">
    <div class="form">
        <h2>Login</h2>
        <input type="text" placeholder="email">
        <input type="text" placeholder="password">
        <button>Sign In</button>
    </div>

    <footer class="footer-width">
        <div class="inner">
        <p>&copy; @DateTime.Now.Year</p>
        </div>
    </footer>
</div>

CSS：

footer {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.inner {
    border-top: 1px solid black;
    width: 100%;
}

input {
    display: block;
    margin-bottom: 15px;
}

button {
    margin-bottom: 15px;
}

.container {
    width: 75%;
    margin: 0 auto;
}