滚动页面时不能让两条垂直线粘在底部

如何解决滚动页面时不能让两条垂直线粘在底部

我正在尝试创建一个每边都有两条垂直线的网站。即使用户上下滚动页面，我也希望线条始终粘在底部。出于某种原因，一行总是粘在底部，而另一行在滚动到底部时只粘在底部。

这就是我所拥有的：

我认为这与显示元素有关，但在尝试了所有方法并搜索在线资源后，我找不到解决方案。

这是与这个问题相关的代码片段（我不会发布整个代码，因为它无关紧要而且很长：

HTML

    <div id = "sticky-line-right">
        <p id = "right-para">[e-mail]</p>
        <div id = "right-line"></div>
    </div>

    <div id = "sticky-line-left">
        <a href = "https://www.google.ca" id = "github">
            <img src = "photos/github.png" alt = "Jason's Github page" width = "20px" height = "20px">
        </a>
        
        <a href = "https://www.google.ca" id = "linkedin">
            <img src = "photos/linkedin.png" alt = "Jason's Linkedin page" width = "20px" height = "20px">
        </a>
        
        <div id = "left-line"></div>
    </div>

CSS

#sticky-line-left {
    bottom: 0;
    position: sticky;
    margin-left: 5%;
    display: block;
}

#sticky-line-right {
    bottom: 0;
    position: sticky;
    margin-right: 5%;
    display: block;
}

#github {
    margin-left: -8px;
    display: block;
}

#linkedin {
    margin-left: -8px;
    display: block;
}

#left-line {
    border-left: 2px solid black;
    height: 70px;
    bottom: 0;
    position: sticky;
    display: block;
}

#right-line {
    border-right: 2px solid black;
    height: 70px;
    bottom: 0;
    position: sticky;
    display: block;
}

解决方法

可能是我的问题错了，但如果您希望它在底部保持固定，请使用 position: fixed;。为什么使用position: sticky;