如何将HTML类放置在页面的最底部？

Question

我是一个初学者（不要严格判断），并且写了一个作品集网站。我为我的社交网络创建了图标，但是当您移动屏幕时它们也会移动。我需要确保它们始终位于页面底部。我的 CSS 代码：

body {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
}

.wrapper {
    display: flex;
    position: fixed;
    bottom: 0;
    padding: 10px;
}

.wrapper .icon {
    background: rgba(255, 224, 172, 0.9);
    border-radius: 50%;
    margin: 10px;
    width: 50px;
    height: 50px;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -0.1px 10px black;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
    position: absolute;
    top: -20px;
    font-size: 15px;
    background: transparent;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
    opacity: 1;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
    text-shadow: 0px -1px 0px grey;
}

.wrapper .telegram:hover,
.wrapper .telegram:hover .tooltip,
.wrapper .telegram:hover .tooltip::before {
    background: #1877F2;
    color: #ffffff;
}

.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
    background: #000;
    color: #ffffff;
}

.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
    background: #333333;
    color: #ffffff;
}

.wrapper .VK:hover,
.wrapper .VK:hover .tooltip,
.wrapper .VK:hover .tooltip::before {
    background: #2700EB;
    color: #ffffff;
}

HTML：

<div class="wrapper">
        <a href="#">
            <div class="icon telegram">
                <span class="tooltip">Telegram</span>
                <span><i class="fa-brands fa-telegram" style="color: #000000;"></i></span>
            </div>
        </a>
        <a href="#">
            <div class="icon twitter">
                <span class="tooltip">Twitter</span>
                <span><i class="fa-brands fa-x-twitter" style="color: #000000;"></i></spa>
            </div>
        </a>
        <a href="#">
            <div class="icon github">
                <span class="tooltip">GitHub</span>
                <span><i class="fa-brands fa-github" style="color: #000000;"></i></span>
            </div>
        </a>
        <a href="#">
            <div class="icon VK">
                <span class="tooltip">VK</span>
                <span><i class="fa-brands fa-vk" style="color: #000000;"></i></span>
            </div>
        </a>
    </div>

我浏览了很多网站，他们大多都写了

position: fixed; bottom: 0;

或

position: absolute; bottom: 0;

但这没有帮助。

Answer 1

请使用此代码：

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Poppins', sans-serif;
}
.content {
    flex: 1;
}

HTML

<div class="content">
    <!-- Main content of your portfolio goes here -->
</div>

如果您遇到任何解决方案，请告诉我