[SOLUCIONADO] sidebar full height pero que se acomode al contenido

Kristhoff · #1 (**permalink**) 25/08/2015, 23:14

Hola compañeros
bien estoy tratando de hacer un responsive layout de la siguiente manera:

Para lo cual tengo el siguiente código:

Código HTML:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body, html {
			margin: 0;
    		height:100%;
		}
		.left{
			display: table-cell;
			background-color: red;
			min-height: 100% !important;
			min-width: 160px;
			width: 25%;
		}
		.content{
			background-color: blue;
			display: table-cell;
		}
	</style>
</head>
<body>
	<div class="left">
	</div>
	<div class="content">
	</div>
</body>
</html>

el problema es que necesito que el sidebar de la izquierda ocupe el 100% de la altura de la pantalla pero que a la vez se ajuste al contenido cuando éste sea más grande que el 100% de la altura del navegador. Actualmente no ocupa el 100% de la altura.
La idea es que dicho sidebar se oculte para pantallas más pequeñas y aparezca un botón para mostrarla en el "header" del div de la derecha. Intenté usar el min-height: 100% pero no me funciona :( alguna idea?

AngelKrak · #2 (**permalink**) 26/08/2015, 06:52

ponle un height: 100vh; para que ocupe toda la Pantalla tu Sidebar ;)