CSS经典范例——底栏自适应贴底_实现原理

需求描述

  • 当内容高度不足一屏时，让底部栏贴在浏览器窗口的底部；
  • 当内容高度超过一屏时，让底部栏贴在页面最下方。

实现原理

使用 min-height: 100vh; 确保容器中内容不足一屏时，整个容器也是充满全屏的。

核心代码

<div class="container">
    <section>
        <button>点击显示或隐藏代码</button>
        <ul class="codes col2" hidden>
            ...
        </ul>
    </section>
    <footer></footer>
</div>
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
footer {
    height: 4rem;
    background-color: #333;
    margin-top: auto;
}

.active + .codes {
    display: block;
}
document.querySelector('button').onclick = function () {
    this.classList.toggle('active');
};

在线Demo见 ​​https://demo.cssworld.cn/new/7/3-1.php​​