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?
