Problema simple, aunque aparentemente no es una solución simple.Problema de altura del contenedor 100% - HTML5/CSS2/3
Ejemplo aquí: http://myhideout.eu/new/
Básicamente el sitio consisten en dos columnas, aunque sin envoltorios o nada parecido, ya que me gusta mucho que ver con el menor por el estilo de lo posible, en parte, por el bien de simplicidad, pero también para hacer uso de la semántica de HTML5, que en mi opinión no incluye realmente divs, sin importar cuán apropiadamente se denominen.
Sin embargo, me gustaría que la barra lateral ocupe toda la altura de la columna adyacente, lo que no es tan fácil como pensé en un principio. Sé que es un viejo problema, pero estaba seguro de haberlo resuelto antes.
De todos modos, traté de averiguar cómo hacerlo sin usar envoltorios o JavaScript. JavaScript no funciona, pero esa es otra historia. Estaba seguro de que habría algún tipo de función inteligente de CSS3 o algo similar, que resolvería mi problema, sin la necesidad de envoltorios, pero mi búsqueda de esta característica de mucha necesidad fue un fracaso de proporciones épicas.
Así que me dije a mí mismo: "¡Maldición! Bueno, solo tengo que usar envoltorios entonces".
Estaba seguro de que funcionaría. Probé con diferentes configuraciones, pero no importaba lo que hiciera, no podía hacerlo funcionar sin establecer una altura absoluta del envoltorio circundante. Solo imagina mi decepción, fallando una vez más cuando estaba seguro de haberlo hecho antes. Así que nuevamente fui en busca de una solución que satisfaga mis necesidades. Aunque apareció mucho más material esta vez, todavía era un fracaso. Las pocas soluciones que encontré fueron cuestionables por decir lo menos.
Por lo tanto, ahora estoy aquí de nuevo, haciendo una más de esas preguntas que sin duda se han preguntado un billón de veces antes. Lo siento, pero realmente no sé a dónde más ir.
Espero que pueda ayudar.
Gracias de antemano y saludos cordiales.
edición:
Esto funciona exactamente como yo quiero también:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0 auto;
width: 800px;
}
#wrapper {
position: relative;
width: 800px;
}
body > header, body > footer {
background-color: red;
width: 800px;
}
#wrapper > article {
margin-right: 200px;
width: 600px;
background-color: blue;
}
#wrapper > aside {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<header>This is a header</header>
<div id="wrapper">
<article>
This is the content<br /><br /><br /><br />left<br /><br /><br /><br />left
</article>
<aside>
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</aside>
</div>
<footer>This is a footer</footer>
</body>
</html>
único problema queda es deshacerse de esa etiqueta maldita div;)
edición: la pantalla de tabla CSS me han señalado propiedades, y realmente parece ser lo que estoy buscando, como la solución inteligente, pero con múltiples elementos en una fila, y solo uno en el otro, no puedo entender cómo debería ser estar hecho.
¿Es necesaria la compatibilidad con IE6? –
Ciertamente no. Solo los navegadores más nuevos que están disponibles de forma gratuita, IE9, Firefox 4, etc. – Zacariaz
Considero mi última edición, me acabo de dar cuenta de que si conoce la altura del encabezado y el pie de página, debería poder soltar el envoltorio div y usar cuerpo en cambio. – Zacariaz