html - una - expansores significado
¿Cómo hacer una expansión div para adaptarse al espacio vertical disponible? (3)
Esta solución resuelve problemas de desplazamiento. Cuando la página está sobredimensionada, su pie de página se coloca 2 líneas nuevas de todo el contenido:
<style>
#container {
position: relative;
height: 100%;
}
#footer {
position: absolute;
bottom: 0;
}
</style>
</HEAD>
<BODY>
<div id="container">
<h1>Some heading</h1>
<p>Some text you have</p>
<br>
<br>
<div id="footer"><p>Rights reserved</p></div>
</div>
</BODY>
</HTML>
Estoy buscando una manera de hacer que el div que contiene el contenido de mi página principal se expanda para que se ajuste al espacio que queda después de agregar mi encabezado y pie de página. El HTML se presenta como tal:
<div id="wrapper">
<div id="header-wrapper">
<header>
<div id="logo-bar"></div>
</header>
<nav></nav>
</div>
<div id="content"></div>
</div>
<div id="footer-wrapper">
<footer></footer>
</div>
Está diseñado para que el pie de página siempre pase la parte inferior de la página estableciendo la altura mínima de #wrapper en 100%. El problema es que #content no se expande para llenar el espacio vacío dentro del #wrapper, lo que dificulta obtener el aspecto que deseo. ¿Cómo puedo hacer que haga eso?
Un buen artículo para pies de página está en A List Apart: http://www.alistapart.com/articles/footers/
Tiene el ejemplo real de cómo coloca un pie de página en la parte inferior con la división de contenido en expansión.
EDITAR:
¿Por qué no usar la parte superior e inferior? Aquí hay un ejemplo completo.
Puede ajustar los valores superior e inferior para optimizar la ubicación del encabezado / pie de página.
<html>
<head>
<style type="text/css">
BODY {
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
height: 100%;
width: 100%;
}
#header-wrapper {
position: absolute;
background-color: #787878;
height: 80px;
width: 100%;
}
#content {
position: absolute;
background-color: #ababab;
width: 100%;
top: 80px;
bottom: 50px;
}
#footer-wrapper {
position: absolute;
background-color: #dedede;
height: 50px;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo-bar">Logo</div>
</div>
<div id="nav"></div>
</div>
<div id="content">Content</div>
<div id="footer-wrapper">
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>