Question

我试图将两个并排的div占据视口的整个高度。每个div都会垂直滚动。左div是菜单，右div是页面内容。我正在使用Bulma CSS库。

当页面内容滚动到底部时，我希望显示页脚。如果页脚是页面内容容器的宽度，我可以解决这个问题。但是要求是页脚必须是 entire 页面的宽度，包括侧边菜单和页面内容div。

我正在尝试使用以下策略：

将页脚div保留为页面内容div的子元素（因此，当用户滚动到页面内容底部时，它将滚动到视图中）。
在页脚上使用负边距定位，使其“覆盖”左侧菜单。

可以在以下站点看到类似我想要完成的事情：https://www.alphavantage.co/documentation/。

下面是一个无法实现我想要的示例。当我希望页脚位于侧面菜单的“顶部”时，我可以看到它位于侧面菜单的“下方”。（我知道此示例存在宽度计算问题-现在，我只是想解决“出现的全角页脚”问题。）

如果有一种策略可以更轻松地实现目标，那么我不必使用此策略。

有人能建议我在将主要内容div滚动到底部时如何实现全页脚滚动到视图中的效果吗？

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
    <style>
        #header {
            background-color: plum;
            height: 30px;
            padding: 10px;
        }
        #container {
            height: calc(100vh - 30px);
            width: calc(100vw - 20px);
        }
        #side-menu {
            background-color: burlywood;
            overflow-y: scroll;
            padding: 10px;
            position: relative;
            z-index: 1;
        }
        #main-content {
            background-color: aquamarine;
            overflow-y: scroll;
            padding: 10px;
            position: relative;
            z-index: 2;
        }
        #footer {
            background-color: purple;
            height: 25px;
            margin-left: -20vh;
            position: relative;
            z-index: 3;
        }
        .take-up-space {
            height: 100px;
        }
    </style>
</head>

<body>

    <div id="header" class="columns">Header Here</div>
    <div id="container" class="columns">
        <div id="side-menu" class="column is-one-fifth">
            <div class="take-up-space">Menu items</div>
            <div class="take-up-space">More stuff</div>
            <div class="take-up-space">More stuff</div>
            <div class="take-up-space">More stuff</div>
            <div class="take-up-space">More stuff</div>
            <div class="take-up-space">More stuff</div>
            <div class="take-up-space">More stuff</div>
            <div class="take-up-space">More stuff</div>
            <div class="take-up-space">More stuff</div>
            <div class="take-up-space">More stuff</div>
        </div>
        <div id="main-content" class="column is-four-fifths">
            <div class="take-up-space">Article</div>
            <div class="take-up-space">Another article</div>
            <div class="take-up-space">Another article</div>
            <div class="take-up-space">Another article</div>
            <div class="take-up-space">Another article</div>
            <div class="take-up-space">Another article</div>
            <div class="take-up-space">Another article</div>
            <div class="take-up-space">Another article</div>
            <div class="take-up-space">Another article</div>
            <div class="take-up-space">Another article</div>
            <div id="footer">I am the footer</div>
        </div>
    </div>

</body>

两个滚动的并排div，带有“出现”的全角页脚

0 个答案: