Estoy tratando de desplazar automáticamente el contenido, que está funcionando. Sin embargo, cuando trato de fijar el pie de página en la parte inferior de la ventana gráfica, el contenido se desplaza más allá del pie de página y el pie de página se desplaza con el contenido.
Si elimino el CSS para el elemento de pie de página, el pie de página comienza en la parte superior, el contenido lo empuja hacia abajo y el contenido se desplaza automáticamente por encima del pie de página como se esperaba. Pero el pie de página no está anclado en la parte inferior como esperaba.
<!DOCTYPE html> <html lang="en"> <head> <title>hyperbole</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css"> </head> <style> #content{ height: 100%; display: flex; flex-direction: column; overflow-y: scroll; } footer { position: absolute !important; bottom: 0 !important; width: 100%; } </style> <body> <div class="container" id="cont"> <header class="sticky"><h1>Header</h1></header> <div id="content"></div> <footer class="sticky"><h3>Footer</h3></footer> </div> </body> <script> window.addEventListener('DOMContentLoaded', (event) => { history.scrollRestoration = "manual" window.scrollTo(0, document.body.scrollHeight) setInterval(()=>{ var content = document.getElementById("content") var textnode = document.createElement("div") textnode.innerText = Math.random() content.appendChild(textnode) window.scrollTo(0, document.body.scrollHeight) }, 500) }) </script> <html>Debe usar position: fixed en lugar de position: absolute . position: absolute saca el elemento del flujo del documento y lo coloca en relación con toda la página . position: fixed también lo saca del flujo del documento, pero lo coloca en relación con la ventana gráfica. Nuevamente terminará con contenido oculto debajo del pie de página; para solucionar esto, establezca un margin-bottom en el body que sea igual a la altura de su pie de página. Código:
<!DOCTYPE html> <html lang="en"> <head> <title>hyperbole</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css"> </head> <style> #content{ height: 100%; display: flex; flex-direction: column; overflow-y: scroll; } footer { position: fixed !important; bottom: 0 !important; width: 100%; } body { margin-bottom: 80px; } </style> <body> <div class="container" id="cont"> <header class="sticky"><h1>Header</h1></header> <div id="content"></div> <footer class="sticky"><h3>Footer</h3></footer> </div> </body> <script> window.addEventListener('DOMContentLoaded', (event) => { history.scrollRestoration = "manual" window.scrollTo(0, document.body.scrollHeight) setInterval(()=>{ var content = document.getElementById("content") var textnode = document.createElement("div") textnode.innerText = Math.random() content.appendChild(textnode) window.scrollTo(0, document.body.scrollHeight) }, 500) }) </script> <html>Puede que tenga que experimentar un poco con el valor del margen, especialmente porque su pie de página no tiene una altura fija.
Establezca el pie de página en fixed !important; y debería permanecer en su lugar ahora.
window.addEventListener('DOMContentLoaded', (event) => { history.scrollRestoration = "manual"; window.scrollTo(0, document.body.scrollHeight); const content = document.getElementById("content"); setInterval(() => { const textnode = document.createElement("div"); textnode.innerText = Math.random(); content.appendChild(textnode); window.scrollTo(0, document.body.scrollHeight); }, 500); }); #content { position: absolute; height: 100%; display: flex; flex-direction: column; overflow-y: scroll; width: calc(100% - 20px); } footer { position: fixed !important; bottom: 0 !important; width: 100%; } <!DOCTYPE html> <html lang="en"> <head> <title>hyperbole</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css"> </head> <body> <div style="position:relative; height:calc(100vh - 140px)"> <div class="container" id="cont"> <header class="sticky"> <h1>Header</h1> </header> <div id="content"></div> <footer class="sticky"> <h3>Footer</h3> </footer> </div> </div> </body>