altura div dentro de table-cell

Kristhoff · #1 (**permalink**) 26/08/2015, 22:50

Hola amig@s
estoy haciendo un layout usando display: table-cell pues me parece más limpio que usar floats. Mi problema es que necesito que un div dentro de uno de estos "table-cell" ocupe la altura completa de dicha celda, pero al usar width:100%" se me desborda del "table-cell" de la siguiene manera:

Quisiera que el div del contenido cubra el 100% del resto de su contenedor (el que contiene el div2, div3 y div4).
Pongo el ejemplo para que lo vean por ustedes mismos:
http://codepen.io/ckristhoff/pen/avoNWP
El div de la izquierda esta bien, tiene una altura del 100% y se ajusta al contenido aún si el contenido es más alto que el 100% de la ventana, así mismo quiero que sea para el div4.

AngelKrak · #2 (**permalink**) 27/08/2015, 06:57

prueba agregandole height: 100vh; al .content-container, haber si es lo que buscas jejejeje xD

http://codepen.io/AngelKrak/pen/avopJO

Kristhoff · #3 (**permalink**) 27/08/2015, 18:35

Cita:

Iniciado por AngelKrak

prueba agregandole height: 100vh; al .content-container, haber si es lo que buscas jejejeje xD

http://codepen.io/AngelKrak/pen/avopJO

Hola AngelKrak, probé el hv pero hay un problema, si el contenido del main-container es menor el main-container no cubre el el espacio restante del content-container y lo que quiero es que así el contenido sea menor, el main-container cubra el resto y crezca si el contenido es más grande es decir que crezca hacia abajo como lo hace el left-container :(

AngelKrak · #4 (**permalink**) 27/08/2015, 20:52

dale un min-height: 100vh; al .main-container me imagino que con eso es como lo quieres ;)

Kristhoff · #5 (**permalink**) 09/09/2015, 09:48

Hola ^_^
bueno después de tanto luchar no he dado con una solución lo suficientemente adecuada para mi gusto, pero procedo a comentar la maroma que hice:

Decidí cambiar de maquetado hecho por mi a un grid responsive (el de Primefaces), para lo cual presentaba el mismo problema. Pude solucionarlo poniéndole alturas estáticas a los div2 y div3 mientras que al div4 le puse una altura calculada, es decir:

Código CSS:

Ver original.div2{ height: 80px; }
.div3{ height: 50px; }
.div4{ height: calc(100vh - 130px); }

y es así como lo solucioné, mi conclusión es que la altura no importa mucho, o por lo menos no tanto como la anchura a la hora de hacer responsive un sitio.

Espero que le sirva a alguien