侧边栏顶部有粘性元素，底部固定有页脚

Question

我正在尝试制作一个带有页眉、侧边栏和主体的网站布局。 主要布局是一个 CSS grid 。 侧边栏有两个元素：

• 第一个 ( .sidebar.container.top ) 是一个粘性的导航区域，即当用户滚动经过标题时保持固定在视口的左上角。
• 第二个 ( .sidebar.container.bottom ) 是一个页脚，应该始终位于视口的左下角。

在我的代码中，粘性导航区域按预期工作，但我无法让.bottom元素执行我想要的操作：

• 如果我将.sidebar.container的高度设置为100vh （正如我在下面所做的那样），那么一旦您向下滚动，侧边栏就会正常运行，但是当页面加载时， .bottom文本会被部分截断。
• 如果我将.sidebar.container设置为100%高度，它会拉伸以匹配正文文本的长度，并且.bottom元素在您一直向下滚动之前不可见。
• 我不能使用.bottom { position: fixed; } 因为这会重置.bottom { position: fixed; }的.bottom ，但我希望宽度能够动态响应（注意在 body 样式中使用fr单位和max-width ）。

如何让侧边栏底部的文本浮动到视口底部？

这是我的代码（请原谅 long lorem ipsum——有必要显示滚动行为）：

 body { display: grid; grid-template-columns: 1fr 5fr; max-width: 800px; } header { grid-column: 1 / 3; background-color: aqua; }.sidebar { background-color: greenyellow; }.sidebar.container { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: 1fr auto; } main { background-color: lightcoral; }

 <header> <h1>Page title</h1> </header> <div class="sidebar"> <div class="container"> <div class="top">This is the main sidebar text. It should be in the top left of the sidebar. The sidebar itself should run from the bottom of the header to the bottom of the, and once the user scrolls past the header, the sidebar should take up the full height of the page.</div> <div class="bottom">This is some secondary sidebar text. It should always be at the bottom left of the viewport. However, it is partially hidden from view when the page loads because the header pushes it below the viewport.</div> </div> </div> <main> <h1> Body text </h1> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, id. Sapiente dolores mollitia quo sequi officiis ipsa corrupti minima fugiat rem laudantium natus soluta, ab non porro asperiores nostrum possimus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia voluptatibus, corporis tempore reiciendis provident delectus temporibus modi in nemo corrupti eum rerum animi, veniam vero? Adipisci voluptas voluptatum similique incidunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima quasi neque aliquam ea sed quia amet saepe illo placeat? Magnam, possimus a doloribus blanditiis culpa officia ad explicabo dolorem tempora. Lorem ipsum dolor sit amet consectetur adipisicing elit, Rem. velit, Vero eveniet fugit qui dignissimos incidunt, Debitis repellat pariatur cum totam laboriosam nesciunt. impedit excepturi, eaque veniam commodi odit reiciendis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid voluptatem ut tempore debitis alias veniam minus natus nemo id dignissimos dicta nobis rerum dolorem iste, ab blanditiis? Quibusdam. tempore nisi, Lorem ipsum dolor sit amet consectetur adipisicing elit. Est adipisci recusandae architecto explicabo numquam fuga repellat totam eligendi voluptatum. earum ab doloremque iste assumenda optio, Eveniet ipsa laboriosam rerum dolores. Lorem ipsum dolor. sit amet consectetur adipisicing elit, Tenetur quia velit ratione architecto distinctio nam atque pariatur reprehenderit, Praesentium debitis voluptatum rem blanditiis. doloremque assumenda quibusdam vero consectetur, Cum. ipsa? Lorem ipsum dolor sit, amet consectetur adipisicing elit? Fugiat rerum tempore voluptatibus, Ut pariatur fugit facilis autem minus eum facere maxime laborum. Cumque dicta magnam, asperiores nam molestiae laboriosam cupiditate. </p> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, id. Sapiente dolores mollitia quo sequi officiis ipsa corrupti minima fugiat rem laudantium natus soluta, ab non porro asperiores nostrum possimus, Lorem ipsum? dolor sit amet consectetur adipisicing elit. Officia voluptatibus. corporis tempore reiciendis provident delectus temporibus modi in nemo corrupti eum rerum animi? veniam vero, Adipisci voluptas voluptatum similique incidunt. Lorem ipsum dolor sit amet consectetur adipisicing elit, Minima quasi neque aliquam ea sed quia amet saepe illo placeat. Magnam, possimus a doloribus blanditiis culpa officia ad explicabo dolorem tempora, Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, velit. Vero eveniet fugit qui dignissimos incidunt, Debitis repellat pariatur cum totam laboriosam nesciunt. impedit excepturi, eaque veniam commodi odit reiciendis? Lorem ipsum. dolor sit amet consectetur adipisicing elit, Aliquid voluptatem ut tempore debitis alias veniam minus natus nemo id dignissimos dicta nobis rerum dolorem iste. ab blanditiis. Quibusdam, tempore nisi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Est adipisci recusandae architecto explicabo numquam fuga repellat totam eligendi voluptatum, earum ab doloremque iste assumenda optio, Eveniet ipsa laboriosam rerum dolores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur quia velit ratione architecto distinctio nam atque pariatur reprehenderit? Praesentium debitis voluptatum rem blanditiis, doloremque assumenda quibusdam vero consectetur? Cum, ipsa. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat rerum tempore voluptatibus, Ut pariatur fugit facilis autem minus eum facere maxime laborum. Cumque dicta magnam, asperiores nam molestiae laboriosam cupiditate. </p> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nihil? id. Sapiente dolores mollitia quo sequi officiis ipsa corrupti minima fugiat rem laudantium natus soluta. ab non porro asperiores nostrum possimus? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia voluptatibus, corporis tempore reiciendis provident delectus temporibus modi in nemo corrupti eum rerum animi. veniam vero, Adipisci voluptas voluptatum similique incidunt, Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima quasi neque aliquam ea sed quia amet saepe illo placeat, Magnam. possimus a doloribus blanditiis culpa officia ad explicabo dolorem tempora, Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, velit? Vero eveniet fugit qui dignissimos incidunt. Debitis repellat pariatur cum totam laboriosam nesciunt, impedit excepturi. eaque veniam commodi odit reiciendis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid voluptatem ut tempore debitis alias veniam minus natus nemo id dignissimos dicta nobis rerum dolorem iste. ab blanditiis, Quibusdam, tempore nisi. Lorem ipsum dolor sit amet consectetur adipisicing elit, Est adipisci recusandae architecto explicabo numquam fuga repellat totam eligendi voluptatum. earum ab doloremque iste assumenda optio? Eveniet ipsa laboriosam rerum dolores, Lorem ipsum dolor? sit amet consectetur adipisicing elit. Tenetur quia velit ratione architecto distinctio nam atque pariatur reprehenderit. Praesentium debitis voluptatum rem blanditiis, doloremque assumenda quibusdam vero consectetur! Cum, ipsa. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat rerum tempore voluptatibus! Ut pariatur fugit facilis autem minus eum facere maxime laborum? Cumque dicta magnam, asperiores nam molestiae laboriosam cupiditate? </p> </main>

这是它被切断的方式

Answer 1

我将这个 css 添加到底层：

    .bottom {
        bottom: 0;
        position: sticky;
    }

此元素的任何部分都不会低于视口。