¿Cómo evitar que Sticky Footer cubra el contenido...?
Estoy usando un pie de página "adhesivo", pero en un par de páginas se superpone al contenido. ¿Hay alguna manera de evitar que esto suceda, pero manteniendo su calidad "pegajosa"?
Intenté usar min-height:on HTMLy body, pero no funcionó.
CSS:
html {
background: black url(images/bg2.jpg) no-repeat 200px center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
body {
margin: 0;
height: 100%;
padding-left: 40px;
padding-top: 25px;
}
#container {
min-height: 100%;
position: relative;
height: 100%;
min-width: 900px;
overflow: hidden;
}
#body {
padding-bottom: 100px;
float: left;
background-color: rgba(0,0,0,0.7);
width: 750px;
height: 400px;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 100px;
}
HTML:
<body>
<div id="container">
<div id="header">
<div class="logo">C</div>
<ul class="main_nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="body">
<div id="bio_wrapper">
</div>
</div>
<div id="footer">
<span class="footer_text">Copyright © 2013<br />All Rights Reserved.</span>
</div>
</div>
</body>
Como dijo amit, deberías poner un margin-bottompara tu bodyy usarlo min-heighten lugar de height:
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
}
Y deberías eliminar la altura: 100% de<body>
¡Espero que esto ayude!
Si el div del cuerpo se cerró antes de que comenzara el div del pie de página, utilice la propiedad margen inferior. Ejemplo si la estructura de la página es
<div id="body">
</div>
<div id="footer">
</div>
a continuación, escribir
#body{
margin-bottom: (height of your footer);
}
Si la estructura de su código no es así. Quiero decir que tu div de pie de página está dentro del div del cuerpo. Luego use esa propiedad de margen inferior para el div que se cierra justo antes de que comience el div del pie de página.
Eche un vistazo a esta solución . Puede utilizar el posicionamiento absoluto para todos los elementos principales de su contenido (encabezado, artículo, pie de página). Utilice consultas @media para crear pausas en diferentes resoluciones si necesita que la altura del encabezado o pie de página cambie para diferentes anchos de pantalla (diseño responsivo) y dígale a su área de contenido principal que oculte el desbordamiento. De esta manera también puedes utilizar diseños relativos flotantes dentro de las áreas de contenido principales.
Esta solución es la que funcionó para mí.
Siga ese enlace para obtener más explicaciones y algunas imágenes, pero básicamente, la idea se reduce a agregar un relleno en la parte inferior del contenido principal que sea al menos la altura del pie de página.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
CSS:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
