【发布时间】：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 - 这些示例仅用于演示，仅用于引导您找到可能的解决方案的正确方向。
标签： css footer absolute sticky