¿Cómo fuerzo que un bloque DIV se extienda al final de una página incluso si no tiene contenido?
https://stackoverflow.com/questions/147528
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
En el marcado que se muestra a continuación, estoy tratando de hacer que la división de contenido se extienda hasta el final de la página, pero solo se extiende si hay contenido para mostrar. La razón por la que quiero hacer esto es porque el borde vertical sigue apareciendo en la página, incluso si no hay ningún contenido para mostrar.
Aquí está mi HTML :
<body>
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
Y mi CSS :
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
Solución
Su problema no es que el div no esté al 100% de altura, sino que el contenedor que lo rodea no lo esté. Esto ayudará en el navegador que sospecho que está usando:
html,body { height:100%; }
Es posible que también necesite ajustar el relleno y los márgenes, pero esto lo llevará al 90% del camino. Si necesita que funcione con todos los navegadores, tendrá que jugar un poco.
Este sitio tiene algunos ejemplos excelentes:
http://www.brunildo.org/test/html_body_0.html < br>
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
También recomiendo ir a http://quirksmode.org/
Otros consejos
Trataré de responder la pregunta directamente en el título, en lugar de estar empeñado en pegar un pie de página en la parte inferior de la página.
Haga que div se extienda hasta la parte inferior de la página si no hay suficiente contenido para llenar el visor vertical disponible del navegador:
Demostración en (arrastre el controlador del marco para ver el efecto): http://jsfiddle.net/NN7ky
(al alza: limpio, simple. a la baja: requiere flexbox - http://caniuse.com/flexbox )
HTML:
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
CSS:
* { padding: 0; margin: 0; }
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.div1 { background-color: yellow; }
.div2 {
background-color: orange;
flex-grow: 1;
}
ta-da - o tengo demasiado sueño
Intenta jugar con la siguiente regla css:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Cambie la altura para adaptarse a su página. la altura se menciona dos veces para compatibilidad cruzada del navegador.
puedes piratearlo con la min-height declaración
<div style="min-height: 100%">stuff</div>
Prueba Ryan Fait's " Sticky Footer " solución,
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to -bottom-of-page /
Funciona en IE, Firefox, Chrome, Safari y supuestamente Opera también, pero no lo he probado. Es una gran solución. Muy fácil y confiable de implementar.
La propiedad min-height no es compatible con todos los navegadores. Si necesita su #contenido para extender su altura en páginas más largas, la propiedad de altura lo acortará.
Es un truco, pero podría agregar un div vacío con un ancho de 1px y una altura de p. ej. 1000 px dentro de su #content div. Eso obligará al contenido a tener al menos 1000 px de alto y aún permitirá que el contenido más largo extienda la altura cuando sea necesario
Si bien no es tan elegante como CSS puro, un poco de JavaScript puede ayudar a lograr esto:
<html>
<head>
<style type='text/css'>
div {
border: 1px solid #000000;
}
</style>
<script type='text/javascript'>
function expandToWindow(element) {
var margin = 10;
if (element.style.height < window.innerHeight) {
element.style.height = window.innerHeight - (2 * margin)
}
}
</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
Prueba:
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
Todavía no lo he probado ...
Pie de página adhesivo con altura fija:
Esquema HTML:
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#footer {
height: 60px;
}
Creo que el problema se solucionará simplemente haciendo que el html se llene al 100% también, puede ser que el cuerpo llene el 100% del html pero html no llena el 100% de la pantalla.
Prueba con:
html, body {
height: 100%;
}
Pruebe http://mystrd.at/modern-clean-css-sticky -footer /
El enlace de arriba está caído, pero este enlace https://stackoverflow.com/a/18066619/1944643 es Okay. : D
Demostración:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="author" content="http://mystrd.at">
<meta name="robots" content="noindex, nofollow">
<title>James Dean CSS Sticky Footer</title>
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
</body>
</html>
También te puede gustar esto: http: // matthewjamestaylor .com / blog / ultimate-2-column-left-menu-pixels.htm
No es exactamente lo que pediste, pero también podría satisfacer tus necesidades.
No tengo el código, pero sé que lo hice una vez usando una combinación de altura: 1000px y margen inferior: -1000px; Prueba eso.
Dependiendo de cómo funcione su diseño, puede salirse con la suya estableciendo el fondo en el elemento <html>, que siempre es al menos la altura de la ventana gráfica.
No es posible lograr esto usando solo hojas de estilo (CSS). Algunos navegadores no aceptarán
height: 100%;
como un valor más alto que el punto de vista de la ventana del navegador.
Javascript es la solución de navegador cruzado más fácil, aunque como se mencionó, no es una solución limpia o hermosa.
Puede usar " vh " unidad de longitud para la propiedad min-height del elemento mismo y sus padres. Es compatible desde IE9:
<body class="full-height">
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content" class="full-height">
</div>
</body>
CSS:
.full-height {
min-height: 100vh;
box-sizing: border-box;
}
No es la mejor ni la mejor implementación de los mejores estándares, pero puede cambiar el DIV por un SPAN ... No es una solución tan recomendable pero rápida = P =)
Sé que este no es el mejor método, pero no podría resolverlo sin alterar las posiciones de mi encabezado, menú, etc. Entonces ... Usé una tabla para esas dos columnas. Fue una solución RÁPIDA. No se necesita JS;)
