En estos días estoy haciéndome un tema nuevo para mi web y mientras iba probando con css para decidirme si lo hago con sidebar o dejo el ancho completo para el contenido principal, cosa que por cierto aún no he decidido, me surgió un pequeño problema para hacer que el sidebar llegue hasta abajo de la página.
Para hacer esto, podemos solucionarlo dando un margin inferior negativo y un padding inferior positivo con suficiente altura como para que nunca vayamos a llegar, por ejemplo 100000px, al elemento que queramos que su altura sea del 100%; y un overflow: hidden al elemento padre. De la siguiente forma:
El HTML:
<div class="contenedor">
<main class="contenido">
<h1>Contenido principal</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a erat id dui egestas placerat. Duis vulputate dignissim accumsan. Vestibulum pretium ut mi ac condimentum. Phasellus a viverra sem, non suscipit urna. Morbi non lectus consequat, tempor nunc non, rutrum massa. Sed pulvinar ipsum nec dignissim commodo. Maecenas vitae quam magna. Donec elementum mauris massa, et elementum quam convallis quis...</p>
</main>
<aside class="sidebar">
<h2>Sidebar</h2>
<p>Este sidebar llega hasta abajo aunque tenga poco contenido</p>
</aside>
</div>
El CSS ya dando un poquito más de estilos para completar un poco más el diseño de las columnas:
.contenedor {
width: 100%;
max-width: 960px;
margin:0 auto;
overflow: hidden;
}
main.contenido {
width: 66.6666%;
background: #efefef;
padding: 20px;
float: left;
}
aside.sidebar {
float: right;
width: 33.3333%;
background: #666666;
padding: 20px;
color:#ffffff;
margin-bottom: -100000px;
padding-bottom: 100000px;
}