如何制作具有绝对内容的 Sticky Footer？ [复制]

Posted 2023-03-21

【中文标题】如何制作具有绝对内容的 Sticky Footer？ [复制]

【英文标题】：How to make Sticky Footer with absolute content? [duplicate]

【发布时间】：2018-03-30 02:05:13

【问题描述】：

我有这个代码：

header, footer 
  text-align: center;
  background-color: orange;
  padding: 18px;


body 
  margin: 0 auto;
  max-width: 1024px;


section 
  position: absolute;



footer 

<header>header text</header>

<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda eaque aliquid minima tempora ad tempore aut iure accusantium sunt, excepturi quas. Unde ullam quam velit aspernatur distinctio incidunt sapiente provident, maiores minima omnis sunt assumenda praesentium facere, hic harum animi at eaque dignissimos odit blanditiis nulla natus quo? Nostrum earum sed aut distinctio doloribus quaerat nulla atque, inventore delectus, sint blanditiis. Perferendis id iure fuga, voluptatem quo quaerat earum ipsa nam accusamus porro quasi tempora rem voluptatum non ut dolor impedit vero accusantium voluptas, ipsum neque. Quaerat dignissimos consequatur ratione? Eveniet, odit quisquam facilis iure id libero magni beatae velit recusandae praesentium tenetur quis omnis, neque sint sapiente veritatis magnam? Tempora tenetur, reiciendis aliquam nesciunt amet laudantium praesentium deserunt accusamus est at optio ea modi dolore sed repellendus! Libero voluptatem modi deserunt atque vitae quo, cupiditate ipsam minus porro nisi excepturi cumque ipsa accusantium! Ad ratione sapiente similique modi enim? Provident qui voluptatibus explicabo voluptates quidem quam officia doloribus nostrum alias cumque sint porro, molestiae quaerat recusandae labore, id ab dolores dolor ex, beatae inventore culpa aperiam? Expedita similique sapiente nesciunt harum cupiditate nulla perferendis minus saepe. Nesciunt est, cum aperiam reprehenderit, repellendus placeat, dicta unde illum dolor nemo impedit dolorem error assumenda! Aliquid soluta repellendus tenetur? Repudiandae pariatur mollitia fugiat aut fuga quod dignissimos dolorem deleniti quaerat alias dolore aspernatur consequatur, blanditiis odit atque velit, ea quam ullam. Quas, veritatis illo! Ducimus obcaecati ut id, consectetur eveniet ad placeat, minima, ab tenetur possimus soluta corrupti optio architecto? Deserunt est quaerat doloribus rem veritatis commodi debitis culpa excepturi porro eveniet, unde iure, beatae recusandae inventore tenetur. Excepturi deserunt minus expedita voluptatibus ad! Repudiandae esse dolores expedita nisi, pariatur nemo explicabo asperiores architecto non ipsa minus eum veniam delectus, nostrum deserunt, culpa dolorem magni! Deleniti sequi ex repellendus consectetur, laudantium nostrum alias, voluptatem ea velit blanditiis totam in facere tenetur modi ad similique ratione non maxime a rerum, incidunt corrupti quod quibusdam maiores? Neque dolor reiciendis placeat adipisci dignissimos dolores saepe quam et asperiores! Praesentium cupiditate laudantium soluta maxime porro odio reprehenderit fugit velit. Beatae dolorem animi dicta et iusto sed, quasi cumque debitis inventore officiis accusantium, sequi corrupti, tempore doloribus tenetur minima asperiores laboriosam voluptas soluta eum optio non voluptatem? Eum omnis impedit laborum aut laudantium praesentium optio dolorum inventore fuga temporibus. Ea aspernatur iste sapiente debitis error. Quaerat excepturi ipsa impedit hic. Nobis esse voluptate id tenetur vel perspiciatis, distinctio facere alias dignissimos laudantium dolorum veritatis beatae voluptas dolores, ipsam culpa consequatur modi, dolorem quasi eos? Tempora soluta quisquam rerum corporis quis quaerat molestiae, doloremque, nobis eos placeat provident cupiditate, quasi omnis perspiciatis architecto natus veritatis aperiam reiciendis dolorum? Odit reiciendis minus cum dicta facere, voluptas obcaecati. Cumque quod, magni voluptatem dignissimos deleniti labore perferendis atque doloribus adipisci nesciunt pariatur fugit molestias laudantium facilis quibusdam, veritatis quisquam doloremque illo consequuntur quas nostrum consequatur. Placeat tempore molestiae ducimus, animi obcaecati laboriosam hic. Tempore repellat ducimus cupiditate voluptatum doloribus, nobis qui vero. Minima ex sit expedita possimus. Dolorem rerum id praesentium!</section>

<footer>foorer text</footer>

https://codepen.io/anon/pen/boOvqz

如何制作粘性页脚（页脚必须始终在底部）？如果section必须是absolute（过渡动画需要这个）

【问题讨论】：

你尝试了什么？

试试这个footer position: fixed; left: 0; bottom: 0; right: 0;

执行此操作：codepen.io/anon/pen/EwGLmE OR 执行此操作：codepen.io/anon/pen/QqzrOG - 这些示例仅用于演示，仅用于引导您找到可能的解决方案的正确方向。

【参考方案1】：

将下面的css添加到.footer

 footer 
     position: fixed;
     bottom:0;
    

查看下面的 sn-p 以供参考。

header,
footer 
  text-align: center;
  background-color: orange;
  padding: 18px;


body 
  margin: 0 auto;
  max-width: 1024px;


section 
  position: absolute;
  padding-bottom: 60px;


footer 
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

<header>header text</header>

<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda eaque aliquid minima tempora ad tempore aut iure accusantium sunt, excepturi quas. Unde ullam quam velit aspernatur distinctio incidunt sapiente provident, maiores minima omnis sunt assumenda
  praesentium facere, hic harum animi at eaque dignissimos odit blanditiis nulla natus quo? Nostrum earum sed aut distinctio doloribus quaerat nulla atque, inventore delectus, sint blanditiis. Perferendis id iure fuga, voluptatem quo quaerat earum ipsa
  nam accusamus porro quasi tempora rem voluptatum non ut dolor impedit vero accusantium voluptas, ipsum neque. Quaerat dignissimos consequatur ratione? Eveniet, odit quisquam facilis iure id libero magni beatae velit recusandae praesentium tenetur quis
  omnis, neque sint sapiente veritatis magnam? Tempora tenetur, reiciendis aliquam nesciunt amet laudantium praesentium deserunt accusamus est at optio ea modi dolore sed repellendus! Libero voluptatem modi deserunt atque vitae quo, cupiditate ipsam minus
  porro nisi excepturi cumque ipsa accusantium! Ad ratione sapiente similique modi enim? Provident qui voluptatibus explicabo voluptates quidem quam officia doloribus nostrum alias cumque sint porro, molestiae quaerat recusandae labore, id ab dolores
  dolor ex, beatae inventore culpa aperiam? Expedita similique sapiente nesciunt harum cupiditate nulla perferendis minus saepe. Nesciunt est, cum aperiam reprehenderit, repellendus placeat, dicta unde illum dolor nemo impedit dolorem error assumenda!
  Aliquid soluta repellendus tenetur? Repudiandae pariatur mollitia fugiat aut fuga quod dignissimos dolorem deleniti quaerat alias dolore aspernatur consequatur, blanditiis odit atque velit, ea quam ullam. Quas, veritatis illo! Ducimus obcaecati ut id,
  consectetur eveniet ad placeat, minima, ab tenetur possimus soluta corrupti optio architecto? Deserunt est quaerat doloribus rem veritatis commodi debitis culpa excepturi porro eveniet, unde iure, beatae recusandae inventore tenetur. Excepturi deserunt
  minus expedita voluptatibus ad! Repudiandae esse dolores expedita nisi, pariatur nemo explicabo asperiores architecto non ipsa minus eum veniam delectus, nostrum deserunt, culpa dolorem magni! Deleniti sequi ex repellendus consectetur, laudantium nostrum
  alias, voluptatem ea velit blanditiis totam in facere tenetur modi ad similique ratione non maxime a rerum, incidunt corrupti quod quibusdam maiores? Neque dolor reiciendis placeat adipisci dignissimos dolores saepe quam et asperiores! Praesentium cupiditate
  laudantium soluta maxime porro odio reprehenderit fugit velit. Beatae dolorem animi dicta et iusto sed, quasi cumque debitis inventore officiis accusantium, sequi corrupti, tempore doloribus tenetur minima asperiores laboriosam voluptas soluta eum optio
  non voluptatem? Eum omnis impedit laborum aut laudantium praesentium optio dolorum inventore fuga temporibus. Ea aspernatur iste sapiente debitis error. Quaerat excepturi ipsa impedit hic. Nobis esse voluptate id tenetur vel perspiciatis, distinctio
  facere alias dignissimos laudantium dolorum veritatis beatae voluptas dolores, ipsam culpa consequatur modi, dolorem quasi eos? Tempora soluta quisquam rerum corporis quis quaerat molestiae, doloremque, nobis eos placeat provident cupiditate, quasi
  omnis perspiciatis architecto natus veritatis aperiam reiciendis dolorum? Odit reiciendis minus cum dicta facere, voluptas obcaecati. Cumque quod, magni voluptatem dignissimos deleniti labore perferendis atque doloribus adipisci nesciunt pariatur fugit
  molestias laudantium facilis quibusdam, veritatis quisquam doloremque illo consequuntur quas nostrum consequatur. Placeat tempore molestiae ducimus, animi obcaecati laboriosam hic. Tempore repellat ducimus cupiditate voluptatum doloribus, nobis qui
  vero. Minima ex sit expedita possimus. Dolorem rerum id praesentium!</section>

<footer>foorer text</footer>

【讨论】：

不幸的是，这不起作用SSMaker.ru/22d3b88e

检查更新的 sn-p。将绝对位置更改为固定位置。

那么它总是在底部，但是如果该部分不适合屏幕，则页脚必须隐藏

你提到它作为粘性页脚！你在期待什么？