时间戳

首页 > 解决方案 > 固定页脚而不溢出内容

html - 固定页脚而不溢出内容

问题描述

我试图在我的 html 中获得一个固定的页脚，我知道这可以通过绝对位置来完成，并设置底部。当我这样做时，当我的内容变得比容器大时，它会溢出页脚。

我尝试为我的内容设置一个固定的高度。这行得通，但是当以其他分辨率查看时，这些数字当然不再起作用。

这是 HTML：

<div class="container">
<div class="top">
</div>
<div class="content>
</div>
<div class="footer>
</div>
</div>

这是 SCSS：

.container {
    position: absolute;
    min-height: 90vh;
    max-height: 90vh;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}

.container, .top {
        color: $primary;
        width: 100%;
        display: grid;
        grid-template-columns: auto auto 1fr 250px;
        grid-template-rows: auto 1fr;
        border-bottom: 0.1rem solid $contrast;
        padding: 30px;
        align-items: baseline;
        overflow: auto;
}

.container, .content{
        position: relative;
        padding: 30px;
        font-size: 1.2rem;
}


.container, .footer {
        position: absolute;
        bottom:20px;
        width: 100%;
}

我似乎可以弄清楚。还尝试了 flex 和 grid ......

谢谢您的帮助！

标签： htmlcsssass

解决方案

推荐阅读