0
110
ViewsPie de página superpuesto al contenido al intentar que permanezca en la parte inferior de la página
Estoy tratando de hacer un footer de página en la parte inferior de la página, pero se superpone al contenido. Como esto:
cuerpo, html, #raíz
html, body, #root { height: 100%; } #root , body { display: flex; flex-direction: column; }pie de página
position:absolute, bottom:0, width:100%
·
Juan Pablo Isaza
2 answers
Answer question0
Eso es porque estableces position:absolute en el footer de página. Hay formas más sencillas de fijar el pie de página en la parte inferior. Digamos que la estructura de su proyecto es así, observe que hay tres hijos directos dentro .app :
<html> <body> <div id= "root"> <div class= "app"> <Header></Header> <Content></Content> <Footer></Footer> </div> </div> </body> </html>Todo lo que necesitarías es:
.app { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; /* gap: 3rem; */ }
·
Juan Pablo Isaza
Report
0
Quizás esto te ayude.
body{ height:100vh; margin:0; } header{ min-height:50px; background:lightcyan; } footer{ min-height:50px; background:PapayaWhip; } /* Trick */ body{ display:flex; flex-direction:column; } footer{ margin-top:auto; } <body> <header contentEditable>Header</header> <article contentEditable>Content</article> <footer contentEditable>Footer</footer> </body>Si quieres apegarte a la posición absoluta
body{ min-height:100vh; margin:0; position:relative; } header{ min-height:50px; background:lightcyan; } footer{ background:PapayaWhip; } /* Trick: */ body { position: relative; } body::after { content: ''; display: block; height: 50px; /* Set same as footer's height */ } footer { position: absolute; bottom: 0; width: 100%; height: 50px; } <body> <header contentEditable>Header</header> <article contentEditable>Content</article> <footer contentEditable>Footer</footer> </body>
·
Juan Pablo Isaza
Report
Answer question