html - 无需滚动即可将页脚添加到页面

Question

如何向始终位于底部的代码添加页脚？除了左侧 div 中的滚动条之外，应该仍然无法滚动。页脚应填满页面的整个宽度。

CSS

.Top {
    display: flex;
    position: relative;
    z-index: 10;
    height: 80px;
}

.Container {
    display: flex;
    overflow: hidden;
    height: 100vh;
    margin-top: -100px;
    padding-top: 100px;
    position: relative;
    width: 100%;
    backface-visibility: hidden;
    will-change: overflow;
}

.Left,
.Right {
    overflow: auto;
    height: auto; 
}

.Left {
    width: 65%;
    overflow: auto;
    line-height: 18px;
    padding: 0 15px 90px 15px;
}

.Right {
    width: 35%;
}

HTML

<div class="Top"></div>

<div class="Container">
<div class="Left"></div>
<div class="right"></div>
</div>

Answer 1

为此尝试使用 Bootstrap 而不是编写自己的 CSS 类。这将使您的生活更轻松。以下示例将为您提供解决方案。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
    </div>
</div>