側邊欄頂部有粘性元素，底部固定有頁腳

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;
    }

此元素的任何部分都不會低於視口。