El pie de página no se pega al fondo, aunque lo tengo codificado.
https://stackoverflow.com/questions/411228
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Eliminé el pie de página por el momento, el sitio tenía que estar en línea. Así que el enlace también desapareció.
Como puede ver (en FF2 y en IE7) el pie de página está en la parte inferior de la PANTALLA, pero no en la parte inferior de la página (contenido).
Tengo esto en mi código:
<div id="wrap">
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
y esto en el CSS:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
padding-bottom: 30px; /* height of the footer */
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
min-height: 100%;
position: relative;
}
*#wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
padding: 0;
margin: 0;
}
O, para resumir: seguí las instrucciones dadas aquí .
Solución
Correcto, así que con el # tamaño dentro del 100%, retire el relleno de la envoltura y agregue lo siguiente al #contenido
overflow:auto;
padding-bottom:30px;
entonces tu enlace funciona para mí en FF
Otros consejos
No siguió sus instrucciones con suficiente cuidado. La clave para Diseño de Matthew
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
es que el contenedor tiene posición: relativa, mientras que el pie de página tiene posición: absoluta. Eso coloca uno dentro del otro. Observe que el contenedor tiene un espacio reservado para el pie de página reservando el tamaño de relleno del fondo del relleno. Por lo tanto, el diseño solo funciona cuando se fija la altura del pie de página.
Absolutamente posicionado con la parte inferior: el elemento 0 se colocará en la parte inferior del elemento primario más cercano en posición relativa. Si no hay ninguno, se usa viewport en su lugar, y eso es lo que está sucediendo en su diseño.
El pie de página div no es un elemento secundario de tu envoltura div.
¿Qué tal este ?
Mueva el relleno desde la parte inferior del cuerpo hasta la parte inferior de la # envoltura. Su pie de página siempre es de 30 píxeles desde la parte inferior de la "página". debido a ese relleno. Al ponerlo en el #wrap, evitará que el contenido de #wrap vaya detrás de su pie de página.
<style type="text/css">
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
}
*#wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
padding: 0;
}
</style>
<div id="wrap">
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Esto funcionó para mí.
En mi opinión, el hack estrella de IE causa el problema. Intenta cambiar los hacks de IE con:
*html #wrap {
...
}
Hay una técnica bastante buena con demostración en este sitio: http: //www.themaninblue. com / experiment / footerStickAlt /
Debe haber algo más en este asunto, todos los métodos descritos anteriormente funcionan en diferentes sitios, solo que no en el mío.
Esta es la fuente de mi página, se eliminan las cosas no relevantes (contenido y demás):
<body>
<div id="size"> javascript textsize modifier</div>
<div id="wrap">
<div id="top"> logoimage
<div id="menu">
<div id="menuwrapper">
<ul id="primary-nav">
<li> Homelink </li>
<li class="menuactive menuparent" class="over"> Link 2
<ul>
<li> Sublink 1 </li>
<!-- etcetera //-->
</ul>
</li>
<li class="menuparent" class="over"> Active Link 3
<ul>
<li> Sublink 1</li>
<!-- etcetera //-->
</ul>
</li>
</ul>
</div> <!-- end menuwrapper //-->
</div> <!-- end menu //-->
</div> <!-- end top //-->
<div id="content">
<div id="newssnippet"></div>
<div id="roundedright"> <!-- rounded corners //-->
<!-- 6 divs to create rounded corners //-->
<div id="right">Random main content</div>
<!-- 7 divs to create rounded corners //-->
</div> <!-- end rounded corners //-->
<div id="logo">Another logo</div>
<div id="roundedleft"> <!-- rounded corners again //-->
<!-- 6 divs to create rounded corners //-->
<div id="left">News content</div>
<!-- 7 divs to create rounded corners //-->
</div> <!-- end rounded corners //-->
</div> <!-- end content //-->
<div id="footer"></div>
</div><!-- end wrap //-->
</body>
Claramente, estoy siguiendo el diseño prescrito desde enlace en la publicación de apertura .
Luego, en el CSS, tengo:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #e7e7e7 url(images/cms/background.jpg) repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: .8em;
height: 100%;
margin: 0;
padding: 0;
padding-bottom: 30px;
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
min-height:100%;
}
*html #wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: transparent url(images/cms/footer.png) no-repeat bottom center;
padding: 0;
}
#footer p {
margin: 0;
padding: 0;
padding-top: .7em;
text-align: center;
}
#footer a {
text-decoration: none;
}
Eso debería ser cada bit relevante ...
¿Qué me estoy perdiendo?
Para el registro: el pie de página se está pegando en la parte inferior de la naranja en la posición correcta si el contenido es inferior al 100%. Entonces, si no llena la pantalla.
El pie de página está en algún lugar a la mitad del contenido si el contenido es más del 100% de la página, así que cuando tengo que desplazarme para ver todo.
