vh单位经典应用-底部栏动态居底实例页面

HTML：

<div class="container">
    <section>
        <button>点击显示或隐藏代码</button>
        <ul class="codes col2" hidden>
            ...
        </ul>
    </section>
    <footer></footer>
</div>

CSS：

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
footer {
    height: 4rem;
    background-color: #333;
    margin-top: auto;
}

.active + .codes {
    display: block;
}

JS：

document.querySelector('button').onclick = function () {
    this.classList.toggle('active');
};