html - pagina - menu fijo al hacer scroll css
Posición del pie de página en la parte inferior de la página con encabezado fijo (6)
Casi lo tienes. Lo que necesitas es un contenedor.
Aquí está mi bit revisado: JSFiddle Update
Agregue un contenedor div:
<div id="container">
<div id="header"></div>
<div id="page"></div>
<div id="footer"></div>
</div>
Luego haga la posición relativa, y la altura 100%:
#container {
height: 100%;
position: relative;
}
Y asegúrese de que la posición es absoluta para el pie de página.
Quiero ubicar el pie de página en la parte inferior de la página que también tiene un encabezado fijo ...
No con la
position: fixed: no quiero que permanezca en la pantalla, debería estar justo al final de la página y comportarse normalmente cuando se desplaza.No en la parte inferior de la pantalla visible : en la parte inferior de la página , es decir; después de todo otro contenido.
Aquí hay un diagrama para explicar mejor:
Aquí está el código:
- He preparado una demo: JSFiddle
- O ver más abajo
<div id="header">Header</div>
<div id="content">
<p>Some content...</p>
</div>
<div id="footer">Footer</div>
body{
/* Just to enable scrolling in JSFiddle */
height: 1000px;
}
#header{
width: 100%;
height: 100px;
position: fixed;
top: 0px;
z-index: 1;
}
#content{
width: 100%;
position: absolute;
top: 100px; /*Height of header*/
z-index: 0;
}
#footer{
width: 100%;
height: 100px;
position: absolute;
bottom: 0px;
}
/*For demo only*/
#header, #footer{
border: 3px dashed #333333;
background: #FFFFFF;
}
#content{
background: #CCCCCC;
height: 200px;
}
Como mencionó, position: fixed colocaría el pie de página con respecto a la ventana gráfica en lugar de a la página en sí. Por lo tanto, tenemos que mantener el elemento en flujo normal y posicionarlo de alguna manera en la parte inferior de la página.
Hay dos enfoques para lograrlo, que se han discutido en la naturaleza durante el tiempo.
Por ejemplo:
- Artículo de A List Apart Explorando pies de página - por Bobby Van Der Sluis , 2004
- footerStickAlt - por Craig Erskine , 2005
- Pie de página pegajoso - por Shelly Cole , 2006
- Cómo mantener los pies de página en la parte inferior de la página - por Matthew James Taylor , 2007
- Haz que el pie de página se pegue al fondo de una página - por Ryan Fait , 2007
- Versión refinada del pie pegajoso de Ryan Fait - por Chris Coyier , 2009
- Pie de página de Sticky CSS: La forma flexible (que utiliza tablas CSS ) - por Torben Haase , 2011
- Pie de página adhesivo sensible (versión refinada del enfoque de Torben) - por Joshua Cook , 2013
- Resuelto por el pie de página pegajoso de Flexbox - por Philip Walton , 2013
Pie de página pegajoso
En esta respuesta recurriría al método de Ryan Fait, ya que es simple y fácil de entender y también satisface sus necesidades (situaciones en las que tanto el encabezado como el pie de página tienen alturas fijas) .
Teniendo en cuenta la siguiente estructura:
<div id="content"> <!-- content goes here. It may (not) include the header --> </div>
<div id="footer">Footer</div>
Los siguientes pasos son necesarios:
Ajustar la
heightde los elementos<html>y<body>al100%que se requiere para el siguiente paso 1 .Lo más importante que debemos hacer es asegurarnos de que el
#contentsea lo suficientemente alto como para empujar el#footerabajo de la página. Por lo tanto, le damos al#contentunamin-heightde100%.Hasta ahora , el
#contentha tomado el100%de la altura de la ventana gráfica, por lo que deberíamos subir el pie de página para colocarlo en la parte inferior de la página. Para hacer eso, podríamos darle al#contentunmargin-bottomnegativo equivalente a laheightdel pie de página. También para asegurarnos de que el pie de página aparezca sobre el contenido, debemospositionel pie de páginarelative. Demo aquí .Como puede verse, cuando el
#contentcrece por su contenido, algunos de los contenidos van detrás del pie de página. Podríamos evitarlo agregando un elemento espaciador al final de#contento utilizando la combinación depadding-bottomybox-sizing: border-box2, que se supone que también es compatible con IE8 .
4.1 Añadiendo un espaciador
<div id="content">
<!-- content goes here -->
<div class="spacer"></div>
</div>
<div id="footer">Footer</div>
.spacer, #footer { height: 100px; }
4.2 Combinación de padding-bottom y box-sizing
#content {
min-height: 100%;
margin-bottom: -100px; /* Equivalent to footer''s height */
padding-bottom: 100px; /* Equivalent to footer''s height */
box-sizing: border-box;
}
(Tenga en cuenta que los prefijos de los proveedores se omiten debido a la brevedad)
Añadiendo el encabezado
Si el encabezado debería permanecer en el flujo normal , simplemente podría agregarlo al
#contentsiguiente manera:
( Ejemplo aquí )<div id="content"> <div id="header">Header</div> ...Pero si se debe colocar absolutamente 3 , debemos presionar el contenido del elemento
#contenthacia abajo para evitar la superposición .
Por lo tanto, nuevamente, podríamos agregar un espaciador al comienzo de #content ( Ejemplo aquí ):
<div id="header">Header</div>
<div id="content">
<div class="header-spacer"></div>
<!-- content goes here -->
<div class="footer-spacer"></div>
</div>
<div id="footer">Footer</div>
O use la combinación de padding-top y box-sizing siguiente manera:
<div id="header">Header</div>
<div id="content"> <!-- content goes here. --> </div>
<div id="footer">Footer</div>
#content {
min-height: 100%;
margin-bottom: -100px; /* Equivalent to footer''s height */
padding-top : 50px; /* Equivalent to header''s height */
padding-bottom: 100px; /* Equivalent to footer''s height */
box-sizing: border-box;
}
Ejemplo actualizado (Tenga en cuenta que los prefijos de los proveedores se omiten debido a la brevedad)
¡Por ultimo pero no menos importante!
Hoy en día, todos los principales navegadores web modernos admiten box-sizing: border-box declaración de box-sizing: border-box (incluido IE8). Sin embargo, si está buscando la forma tradicional que tiene un soporte de navegador más amplio, siga usando elementos espaciadores.
1. Esto es necesario para hacer min-height: 100% para trabajar en el elemento #content (porque un valor porcentual es relativo a la height del bloque que contiene la caja que establece <body> ). También <html> debería tener una height explícita para hacer la height: 100% para trabajar en <body> .
2. box-sizing: border-box hace que las UA calculen el width / height de la caja, incluyendo el relleno y los bordes.
3. Según la especificación , los elementos posicionados absolutamente son elementos que tienen una position absolute o fixed .
O para aquellos que encontraron esta publicación en Google y desean una respuesta aún más breve, sin envoltorios (porque no los necesita):
html { height: 100%; }
body { min-height: 100%; position: relative; padding-bottom: 3em; }
.footer { height: 3em; position: absolute; bottom: 0; }
hecho, la página ahora tiene al menos el 100% de la altura de la pantalla, y el pie de página se encuentra en la parte inferior de la página, no en la parte inferior de "la pantalla". Si la página es más larga que la pantalla, aún estará en la parte inferior, y lo hicimos sin "elementos de envoltura" o "me gusta": el elemento del body ya es la envoltura que necesitamos =)
La única advertencia es que el margen del cuerpo debe ser el mismo que la altura del pie de página, pero luego como un valor negativo, ya que la regla "inferior: 0" hará que el pie de página comience en la parte inferior en lugar de estar anclado en la línea de base. Por otra parte, como CSS, .less o .styl, esto está garantizado de manera trivial.
Para hacerlo simple:
#header {
position: fixed;
width:100%;
height:100px;
top:0px;
z-index:2;
}
#content, #footer {
position: relative; /* or leave it static as by default */
z-index:1;
}
body,div {
margin:0; padding:0; /* http://jsfiddle.net/css/normalize.css */
}
#content {
margin-top: 100px; /* the same value as header''s height */
}
Soy bastante nuevo en el desarrollo web, y sé que esto ya ha sido respondido, pero esta es la forma más fácil que encontré para resolverlo y creo que de alguna manera es diferente. Quería algo flexible porque mi pie de página puede tener diferentes alturas en diferentes secciones de la aplicación web. Y terminé usando FlexBox y un espaciador.
- Comience por establecer la altura para su html y cuerpo
html, body {
height: 100%;
display: flex;
flex-direction: column;
margin: 0px;
}
Asumo un comportamiento de column para nuestra aplicación, en el caso de que necesite agregar un encabezado, héroe o cualquier contenido alineado verticalmente.
- Crear la clase espaciadora.
.spacer {
flex: 1;
}
- Así que más adelante tu HTML podría ser algo así como
<html>
<body>
<header> Header </header>
Some content...
<div class=''spacer''></div>
<footer> Footer </footer>
</body>
</html>
Puedes jugar con él aquí https://codepen.io/anon/pen/xmGZQL
But if you want the footer to take full size of the screen while #wrapper is 1000px and centered you would do:
<body>
<div id="wrapper">
<div id="wrapper-inner">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
</body>
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#wrapper-inner {
margin: 0 auto;
width: 1000px;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}