CSS 可以让侧边栏在到达尽头后粘在(底部)吗?

Can CSS make a sidebar stick (to the bottom) once you reach its end?

我有一个网站,其内容显示在两栏中,一栏是主要内容,另一栏是侧边栏。侧边栏固定,它只是与主要内容一起自然滚动。

但是,如果主要内容比侧边栏长,您最终会到达侧边栏中没有更多内容的地步,但有更多内容可供阅读(并且整个页面不断滚动)。在这种情况下,我希望侧边栏变粘,侧边栏的底部将粘在屏幕底部。

这让我非常困惑的原因是,这种行为在倒置版本中非常容易实现,这意味着将侧边栏粘在顶部,侧边栏的顶部将粘在顶部只要有额外的主要内容,屏幕就会一直滚动,一旦你到达终点,它就会继续自然地滚动内容。就像这里的表现一样:https://jsfiddle.net/0dxLfzn8/1/

这种行为最初让我相信从 top: 0 切换到 bottom: 0 会实现我所描述的我想要的行为。但是我已经在这里尝试过了,它似乎根本没有做任何事情:https://jsfiddle.net/0dxLfzn8/

HTML:

<div class="container">
  <div class="content">

  </div>
  
  <div class="sidebar">
    <div class="sidebar__inner">
      
    </div>
  </div>
</div>

CSS:

.container {
  display: flex;  
}
  .content {
    flex: 1;
  }
  .sidebar {
    flex-basis: 200px;
  }
    .sidebar__inner {
      position: sticky;
      bottom: 0;
    }

它似乎不想像它在顶部那样粘在底部,我真的不明白为什么它不会。从 top 的行为来看,这似乎是 bottom 应该做的。

我怎样才能做到这一点(当然没有 javascript)?

(而且很难找到解决方案,因为搜索结果中充满了粘性页脚问题)

因为你用的是flex。您的侧边栏需要垂直对齐,在您的情况下对齐到底部。

因此您需要将 align-self: flex-end; 添加到侧边栏。

有关 position: sticky; here 的更多信息。 更多关于 position: sticky; 由于 flex here.

而无法工作的内容

另请注意,使用粘性时应为 webkit 浏览器添加供应商前缀:position: -webkit-sticky;

.container {
  display: flex;
}

.content {
  flex: 1;
}

.sidebar {
  flex-basis: 200px;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  align-self: flex-end;
}

.box {
  margin-bottom: 1rem;
  width: 100%;
  height: 30vh;
  background: grey;
}
<div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet suscipit assumenda, similique atque enim odio sequi, at magni non deserunt a! Nulla pariatur illum voluptate sequi ex optio blanditiis cupiditate vitae officiis id, aliquam dolorum fugiat
    itaque excepturi laudantium ipsa accusamus minima suscipit eum quis vel praesentium commodi aut nostrum. Quam veritatis sit accusantium nisi, exercitationem in facere, cumque nobis, nihil at consectetur ex aperiam voluptatem consequuntur fugit laborum
    ut debitis sunt illum amet reprehenderit iusto aliquid. Tempore quo aut, consequatur voluptatibus ea corporis hic beatae cumque dolorum eius non autem error ipsa, esse facere delectus tenetur cupiditate velit ad numquam! Fuga aut obcaecati natus!
    Sit sint, sed blanditiis quia quis magni facere, minima perspiciatis quos illum voluptas provident necessitatibus vel fuga doloremque aut quidem ullam eaque eum libero! Quae, cupiditate animi laboriosam. Unde, ipsum, numquam. Expedita dignissimos
    autem deleniti, aliquam atque quos, perferendis deserunt porro provident, molestiae possimus adipisci cum quasi. Autem vero voluptate, nam dolore repellendus culpa a quo voluptatum. A alias dolorem aut quam, tempora ratione rerum quae adipisci assumenda
    accusamus sunt, molestias quos asperiores voluptas reiciendis nesciunt, maiores culpa! Quae inventore, voluptates esse vero beatae itaque sequi mollitia quisquam id. Alias, eveniet, nesciunt! Sequi id non animi eius voluptatibus accusamus sapiente
    porro fugiat esse nam, assumenda eligendi sunt temporibus! Ducimus explicabo quas, magni temporibus sint sunt necessitatibus, iste aspernatur consequatur corrupti odio aliquam molestiae? Accusamus incidunt quia molestiae, reprehenderit neque nulla,
    quibusdam ratione facilis facere officiis excepturi illum sequi non dicta iure! Nobis ea earum, ex ipsam eligendi corporis doloribus eaque nesciunt recusandae voluptas voluptatibus numquam totam quas quam animi facilis excepturi porro praesentium
    suscipit labore incidunt quidem quae ad error dolorum. Dolor neque et vero minima tenetur, possimus quasi. Placeat quae, ratione tempora a quis provident odio qui ea nulla laudantium reiciendis numquam dignissimos consequatur laboriosam id eveniet
    iure esse consectetur. A maiores quos quasi soluta quia ad consequatur ullam nisi. Inventore repellat nesciunt quia. Aut quae, quos molestiae magnam aliquam, libero, iste labore ut distinctio amet id quis eaque, animi sunt repellat laudantium eos
    dolorum unde maxime sapiente! Cum sequi libero, praesentium! Provident alias eaque vitae quidem earum, minus reprehenderit inventore fugit, nesciunt repellendus est odit voluptas voluptate eveniet architecto iusto nulla aliquam explicabo. Qui eveniet
    quam eligendi illo. Tempora a perferendis itaque eos suscipit officia laudantium minus nihil voluptate doloribus! Impedit distinctio reiciendis facilis maxime ea necessitatibus assumenda fugiat non commodi iure provident earum repellat doloribus,
    similique labore, atque nemo harum enim quas nostrum unde. Aspernatur culpa eveniet accusamus, ratione, dolor animi non ipsa, dicta fuga magnam nesciunt ex? Laudantium quidem perferendis fugiat maiores! Fugit labore, atque cum mollitia asperiores
    perferendis. Placeat mollitia, ipsam inventore consectetur explicabo sed necessitatibus dolorem, nesciunt porro sequi repellat consequuntur dicta sint est ab non expedita dolores aut quia nobis, saepe error, exercitationem rem deserunt. Voluptates,
    porro. Tempore, quam odio, provident voluptates iste optio accusantium dignissimos, perferendis fugiat officia dolores est. Officia cum deserunt aut earum quos distinctio similique tempora corporis iusto odio, nulla debitis labore atque quasi quisquam
    doloremque saepe iure inventore quia, quo porro a. Sequi dolore perspiciatis culpa ratione aspernatur laudantium nam animi rem perferendis nisi dolorem veritatis, assumenda non nemo nesciunt vel. Perspiciatis facilis, nulla. Ratione voluptates beatae,
    incidunt enim ea quas recusandae, deleniti laborum assumenda, magni nihil dolore velit adipisci illo quam possimus aliquam dolores. Non excepturi, vel, rem consequatur modi totam dolorem alias unde autem obcaecati corporis quae ea error sed atque
    facilis voluptatum deserunt at numquam velit quod molestiae, nesciunt voluptas. Nihil, non eius necessitatibus porro incidunt labore tempore amet, adipisci aliquam, provident iste. Autem dolorum numquam nihil necessitatibus et deleniti voluptate at
    quos ea nesciunt, optio sint ducimus labore, quisquam cupiditate iste laborum odio hic corrupti expedita doloribus odit. Odit quidem repellat vero facere repudiandae veniam voluptatem inventore in reprehenderit. Debitis odio laudantium atque. Repudiandae
    recusandae veniam culpa, laboriosam neque reiciendis illo perferendis reprehenderit quaerat alias molestiae nobis soluta repellat et delectus maxime tempora corporis dolore esse iste! Exercitationem facere officiis quo doloribus laudantium nostrum
    accusamus, qui placeat! Rem voluptatum debitis quod repudiandae facilis, dignissimos quaerat impedit laborum iste officia sed itaque quisquam id architecto. Repellat voluptatem voluptates nam error sed sint velit alias cupiditate, distinctio corrupti
    soluta molestiae expedita, nihil fuga, iusto officia laborum aliquam voluptatum nulla praesentium nisi incidunt eligendi pariatur magni. Aliquam provident iste tempora vel incidunt accusantium pariatur placeat, eius sint illo quos eaque nostrum ut
    illum sapiente voluptatum nam, soluta expedita saepe id voluptates. Repellat dolorum repellendus iusto nesciunt tempore ut, a ad minima perferendis voluptas odio, quidem, ex doloribus pariatur saepe. Optio voluptates dolorum est excepturi corporis
    molestias commodi, tempore labore ipsum voluptas consectetur exercitationem minima. Quos excepturi ipsum harum enim repellendus earum a veritatis nemo odio quam corrupti culpa impedit, qui molestiae dolore eum, aut quia consectetur consequuntur expedita
    exercitationem aliquid labore numquam. Asperiores maiores ab suscipit quis dolor quaerat. Iure, ea! Provident labore, beatae nam blanditiis dolores est saepe, dolor consequatur ipsa eum amet voluptates earum excepturi dolorum officia. Accusantium
    modi neque totam a culpa, ab non ipsa, ex repellat iure ea recusandae consequuntur temporibus obcaecati id, explicabo ipsam ratione, adipisci magni sit commodi nostrum? Excepturi officiis amet tempore deleniti error asperiores cumque dolor reprehenderit
    aut, molestias, officia tempora incidunt ipsa temporibus. Eveniet necessitatibus eligendi eum vitae, sed qui labore ad, commodi dicta ea veritatis magnam iure asperiores veniam dolorem iste repellendus officiis corporis suscipit dolorum excepturi.
    Placeat eligendi eaque eum quibusdam, maiores recusandae. Facilis non inventore, veniam dolores animi dolorum, nihil placeat ut modi quo ratione numquam. Repellat sint nemo quos dolorem, aut assumenda consequuntur at nulla, accusamus distinctio ea
    molestias veniam quo labore vitae quibusdam culpa fugit. Obcaecati officia illo possimus expedita enim, voluptatum fuga molestias facere quis assumenda, illum molestiae nulla alias quod soluta quibusdam odit. Repellendus eius enim sequi praesentium
    nesciunt odit placeat doloremque eaque eos inventore quia blanditiis voluptatibus nisi, autem laborum obcaecati quod accusantium, tempore, eum ipsam, corporis quae temporibus. Consequatur id, doloremque hic esse nulla aliquam cum eos, repudiandae
    optio magnam, commodi laboriosam sed dolor nesciunt! Sit quasi fugit et ut reprehenderit enim cupiditate quisquam excepturi perspiciatis fuga aliquam cum, similique autem hic nulla vitae laudantium numquam distinctio praesentium iure illum totam magnam.
    Ea aliquam eius laudantium deserunt mollitia autem error cum blanditiis. Officia voluptates incidunt, officiis sunt est neque nisi rem repellendus quaerat dolores alias error esse modi eum, tenetur consequatur itaque quam nam, cupiditate ipsam odit.
    Aperiam nobis, consequuntur quis temporibus dolores unde aspernatur ratione architecto sed aliquid sit, rerum dolorem natus corrupti expedita, maiores quam dignissimos accusantium maxime qui? Corporis optio reiciendis ad iusto provident facilis quod
    vitae dignissimos! Aspernatur deserunt accusamus quis iure, qui, culpa vitae at, ut inventore, illo eaque facere recusandae animi nesciunt? Hic, natus sunt id nulla ducimus. Deserunt odit dolores quasi labore eligendi voluptas impedit aspernatur rerum
    porro exercitationem sint, dolorem earum! Ipsum animi voluptates amet nulla, provident voluptatibus earum eos ea quos dolore aperiam hic nihil repellendus, modi molestias, pariatur neque nemo odit corporis veritatis. Suscipit quo cupiditate amet minima
    maiores, ipsa ratione porro magni consequuntur, sunt, inventore et laudantium aliquam magnam dolores mollitia corporis quasi. Dicta repudiandae, doloremque quo illum voluptatem in temporibus omnis dolorum quis explicabo quasi ad quod optio excepturi
    aspernatur cupiditate et veniam iusto porro amet. Sunt cum id, tempore laborum consectetur atque culpa modi ipsum corporis maiores earum quia consequuntur eum unde quae rerum odio eaque est non repellat iure. Qui, ipsam, nisi? Ut amet dicta vitae
    quo blanditiis reprehenderit, debitis voluptatem nostrum, animi sint ex veritatis magni nam autem impedit dolores repudiandae! Iusto soluta sapiente velit omnis mollitia, repellendus voluptatum ullam. Doloremque velit tempora porro sunt rerum. Culpa
    saepe perspiciatis officia est nam cupiditate consequatur sunt, et? Ea sint, reiciendis ipsam assumenda veritatis distinctio ut quo aspernatur, voluptates eum perferendis deserunt, error, voluptate sunt voluptatum quaerat earum hic quasi quis. Eveniet
    fuga aperiam dolores cumque nobis est quae ab ullam facere quidem nesciunt et earum vitae consequuntur, amet provident minus maiores. Voluptatem aperiam, quaerat temporibus. Tenetur soluta nostrum cumque culpa sit recusandae delectus iusto optio obcaecati
    repellat sint repudiandae hic id incidunt vero laborum adipisci numquam animi consequatur dolorem itaque, mollitia consectetur quos est cupiditate? Nisi asperiores delectus at voluptas, repudiandae sunt repellat? Saepe veniam beatae, maxime voluptatum
    fugiat minima rerum, autem reprehenderit est sequi blanditiis officiis nisi, voluptate pariatur cum ducimus qui, error? Odio nihil neque, libero ipsam et obcaecati minus necessitatibus sequi officia quia id deleniti, provident incidunt? Amet ad dolores,
    esse labore impedit, nihil explicabo obcaecati eos vel eius rem sit quia cupiditate, ipsam in deleniti magnam quod earum velit non corporis repudiandae laudantium. Nulla cumque dolores earum? Eveniet rerum fuga, perspiciatis, reiciendis, molestiae
    reprehenderit impedit ab quisquam sit deleniti quos animi aliquid adipisci, placeat at magni dignissimos quis? Repudiandae nesciunt fugiat exercitationem repellat architecto sequi corrupti, non aut, in qui minus laudantium eaque, unde magni voluptas
    vel deserunt necessitatibus? Adipisci laudantium eligendi quisquam nobis eos voluptatum repellat. Ab, eum id assumenda provident asperiores unde est esse dolorum repellat aliquam doloremque voluptatibus amet sunt laborum iure tempore libero eaque
    ratione vitae eos suscipit similique facilis! Voluptate dolore ipsum, magnam facere, ratione ipsa nesciunt dolores, totam debitis optio expedita. Officia adipisci totam quos reprehenderit, magni, qui nostrum, fugiat sunt est error eos tempora facere
    reiciendis molestiae ex doloremque voluptatibus at perferendis. Maiores impedit commodi reprehenderit facere voluptas quae fuga nihil magnam. Deserunt vero dolor possimus harum aliquam fuga eius accusamus optio ad velit voluptate sunt corporis praesentium,
    voluptates alias repudiandae? Aut ex quisquam atque sapiente laborum perferendis et, ad vero fugit corporis alias facilis hic, magnam debitis deserunt quis voluptatem soluta ducimus ipsa accusamus, numquam tempore error aliquam ut tempora. Distinctio
    ipsam unde quasi illum laborum possimus odio harum similique nobis? Distinctio explicabo nisi saepe, animi assumenda eius vel enim libero. Perferendis sequi est eaque porro autem architecto in nulla quod eius ratione accusantium obcaecati, quibusdam
    beatae vitae harum nihil, quae quidem soluta. Repellendus et dolor laboriosam, maiores totam magni cupiditate quo ipsum autem aperiam doloribus, fuga quod, odio dolorem. Odio sed quod obcaecati reprehenderit aliquam cum, distinctio voluptatibus alias!
    Necessitatibus enim quam, placeat dicta? Nulla neque recusandae ipsam nostrum asperiores magni eius rerum voluptatem, quod, dolor reiciendis necessitatibus itaque officiis, fuga nam assumenda pariatur. Minima, enim. Molestiae quae asperiores culpa!
    Dolores at, nam earum debitis vitae ipsa ratione officiis, magni neque pariatur ipsam, laborum tempore accusantium eius magnam natus? Natus possimus, numquam deleniti quibusdam quaerat minima sint nobis, minus tempore incidunt repellendus temporibus,
    neque mollitia consequuntur. Totam veritatis architecto, rem asperiores culpa dolor assumenda! Incidunt minus nam sequi quas ut deleniti molestiae similique sint nulla dignissimos libero magnam, quaerat, odio dolore error iure exercitationem eos et
    itaque. At velit quibusdam sequi distinctio expedita aperiam, asperiores accusamus laboriosam doloribus odio, culpa, ullam ab. Earum inventore repellat fugiat, distinctio est vero magni, quia hic. Repellendus eos sapiente, totam libero dolorem praesentium
    voluptatum, placeat fugit blanditiis fugiat saepe asperiores sunt, ducimus nemo distinctio aut tempora odit vero nesciunt eaque aliquid adipisci! Voluptas, autem omnis sapiente harum quas in veniam. Fugiat cum vel nemo perspiciatis temporibus asperiores
    adipisci! Nobis neque nemo vero suscipit iure, est consectetur eos odit! Obcaecati illum voluptatem facilis, quos fugiat quo est minus, hic, magni error consequuntur quibusdam! Dicta incidunt non odio rerum ducimus officiis animi voluptate, excepturi
    id, pariatur illum repudiandae voluptatem at asperiores alias dolor facere. Enim natus expedita tenetur fugiat, aliquid, voluptatem beatae sed sint perspiciatis distinctio! Perspiciatis quibusdam fugit repellendus, facere nihil tempora minima repudiandae
    ad ducimus ullam sit necessitatibus inventore sequi qui, totam unde quo. Quia beatae animi ea similique placeat unde corporis, amet odit iure magnam, modi quibusdam id totam fugit. Ipsa ad nisi quibusdam laboriosam adipisci beatae delectus deleniti
    quod ratione porro minus sapiente, sint dicta mollitia. Doloribus quasi ipsam atque, quisquam, esse cumque praesentium, velit est repellendus explicabo aut suscipit harum repudiandae veniam, ratione odio quia necessitatibus dicta optio obcaecati dignissimos.
    Velit perspiciatis praesentium similique explicabo officiis, totam labore. Quaerat facere, voluptatem ab quo sed voluptates. Est sunt ratione non iste consequatur impedit sint optio, provident inventore, deserunt hic, eum. Distinctio molestias dolores,
    eligendi nam enim rem atque quasi harum amet, quaerat quis, nostrum praesentium voluptas quos aperiam explicabo quae eaque maxime alias! Laboriosam quo optio esse dicta quae, voluptatem architecto voluptas, numquam adipisci itaque labore placeat tempore
    atque expedita blanditiis sunt dignissimos, maiores qui pariatur. Ipsum dignissimos nulla inventore alias blanditiis corrupti illum ea, est quidem tempora id molestias, facere accusamus cupiditate et dolorum aliquam doloribus magnam placeat quia asperiores!
    Nobis architecto minima ullam tempore, ad, velit at id adipisci praesentium reprehenderit ut sunt consectetur sapiente quod enim expedita beatae neque autem modi natus? Culpa qui minus ipsam corporis officiis natus cumque repellat soluta deleniti
    odit dolor numquam, nihil expedita veniam, voluptate dolorem velit quia voluptas aut hic. Officia omnis iure distinctio nostrum beatae magni quo minus quam voluptates corporis. Nobis impedit dolore consectetur necessitatibus delectus esse tempore
    explicabo repellat modi at praesentium ut iusto, excepturi maxime ipsa blanditiis in obcaecati fugiat, voluptatibus, consequuntur quasi corporis suscipit. Laboriosam quibusdam beatae, repellat amet molestiae illo! Consequatur nostrum, ipsa enim. Blanditiis
    quas pariatur odit doloremque perspiciatis nesciunt ullam, possimus eaque a enim nihil ipsa, laborum labore illum natus aut deserunt, unde. Sequi rerum quam architecto tempore quidem nihil dicta dolor, quia harum ratione voluptatibus id tempora dolorem
    aliquam, accusamus consequatur, doloremque ut assumenda. Repellat, adipisci dolores quam molestias temporibus, voluptatem aliquam voluptas voluptates repellendus vero quaerat fugiat iste neque enim beatae pariatur quisquam, ea nisi alias. Doloremque
    cum qui officia sunt perferendis quibusdam placeat recusandae dolore natus provident aspernatur rem, unde in quaerat repellendus labore iusto porro sit non iure, ab perspiciatis sapiente possimus reiciendis? Blanditiis natus dolor similique, asperiores
    molestiae explicabo iure! Deserunt eaque error, amet quae reprehenderit soluta voluptas ratione distinctio sunt voluptatem temporibus repudiandae id rem corporis eum doloremque et, expedita qui quidem obcaecati ipsa commodi doloribus! Rerum accusantium
    facilis molestiae mollitia fuga doloribus officia omnis provident nulla soluta dignissimos atque maiores quod sit alias quasi aut nisi odit dolore, est temporibus a labore earum vel excepturi! Quo consequuntur magni labore voluptatem quia facere,
    nesciunt facilis laudantium deserunt accusantium velit numquam dolor placeat sunt modi, illum commodi! Ullam harum debitis maiores possimus odit delectus repellat sed nostrum aspernatur distinctio, modi provident ad perspiciatis ipsa, ratione, ipsam
    rerum. Qui autem dicta sed, quod dolores mollitia doloremque molestias aliquam asperiores cupiditate, ab, nostrum velit est id officiis tempore! Quia architecto ullam quaerat magni, dolor minus. Neque consequatur rem amet dolorem nulla aliquid repudiandae,
    aliquam! Tempora voluptatum hic facere, reprehenderit fuga, autem quod libero qui, quas nihil impedit dolore odit nobis aperiam. Ab at laudantium alias, ad architecto aut. Ut nostrum sequi debitis fugiat recusandae delectus saepe deleniti quidem dolorum
    eos tempore animi nihil officiis earum quos ex, et similique explicabo consectetur, voluptates? Suscipit, doloribus consequatur sed! Non quasi, eum impedit harum dignissimos sed maiores ad temporibus at quas reprehenderit laudantium officia, repellendus
    dolorem tempora fugiat mollitia, vel, quos natus ratione aliquid accusantium! Rerum et dicta quas labore, possimus odit voluptatum expedita, tempora modi adipisci aut.
  </div>

  <div class="sidebar">
    <div class="sidebar__inner">
      <div class="box">first box</div>
      <div class="box">2nd box</div>
      <div class="box"> 3rd box</div>
      <div class="box">last box</div>
    </div>
  </div>
</div>