如何制作绝对内容的粘滞页脚？

Question

我有这样的代码：

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（这是必要的过渡动画）

Answer 1

添加下面的CSS .footer

footer { 
    position: fixed; 
    bottom:0; 
    } 

检查以下片段以供参考。

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>