CSS puro cabecera altura minimizado, maximizado cuerpo de altura dentro de un DIV con posición absoluta

Question

Tengo un widget de editor de HTML que yo quiero que aparezca dentro de una posición absoluta, DIV de tamaño fijo. Sin embargo, no sé el tamaño absoluto de la DIV de antemano, y se puede cambiar, como si el usuario cambia el tamaño de la ventana.

El editor, naturalmente, tiene controles y un área editable. Cada uno tiene su propio DIV. Quiero que los controles a ocupan tanto espacio como necesitan, y el área editable para llenar el resto del espacio.

Si utilizo tablas, esto es muy fácil de lograr. Acabo de apagar las fronteras y el relleno y los márgenes, y tirar cada DIV en una célula en su propia fila, y tal vez jugar con max-height en el DIV controles. Esto es lo que parece:

tabla base http://img407.imageshack.us/img407/8435/table1 .png

misma mesa con ventana redimensionada otra manera http://img264.imageshack.us/ img264 / 6438 / table2p.png

Nótese la sección editable ocupar tanto espacio como sea posible sin que aparezcan las barras de desplazamiento.

He jugado con la varios ejemplos de CSS y nada parece funcionar sin tener algo de JavaScript se ejecuta en cambio de tamaño para hacer que el DIV editable sea la altura de la matriz menos la altura de los controles.

Por supuesto, puede hacer que el DIV padres tienen pantalla: mesa y los DIVs niño envuelto en pantalla: DIVs mesa de fila y ellos mismos tienen display: table-cell, pero ... bueno ... en ese caso es exactamente lo mismo que usar TABLE, TR, y TD, pero diez veces más feo en aras de la pureza CSS. (¿Por qué molestarse?)

Por lo tanto, sin necesidad de utilizar directamente la pantalla: mesa y amigos, ni TABLA / TR / TD, ni JavaScript, hay una manera de CSS puro de hacer esto? En otras palabras, hay una manera de decir puro CSS, DIV1, ocupar el menor espacio vertical como sea posible, y DIV2, ocupa el espacio vertical que queda dentro del elemento padre?

Si no hay, estoy listo para dejar de suscribirse a la mentalidad "puro CSS". Me ha causado suficiente dolor con muy poco desarrollador o usuario final beneficio.

Answer 1

Sólo hay tantas opciones. Si desea que el comportamiento a modo de mesa sin necesidad de utilizar una tabla a continuación, utilizar la pantalla: mesa y se da la opción de cambiar de opinión más adelante. De esta manera, mientras más feo en el marcado (subjetiva), tiene más sentido para mí:. Que va a terminar con un par de elementos más, pero no se bloqueará para un diseño específico

Si no se preocupan por el marcado y luego apretar el gatillo y usar una tabla. Esto será más fácil en el corto plazo.

Mi pregunta:? Si no desea utilizar JavaScript, ¿cómo va a ser la implementación de los controles del editor

Answer 2

Esta pregunta se dirige a un problema que veo a mucha gente enfrenta con ultimamente: obedecer a la "única utilizar tablas para datos tabulares" regla, o simplemente utilizar las tablas y hacer el trabajo de 1/3. El hecho de que esto es aún una decisión difícil es una demostración de cómo todo lo que han convertido en estándares locos. Olvídese de las normas, utilizar tablas, lograr que se haga de forma limpia y sencilla. Si W3C tiene un problema con eso, pueden quejarse justo después de que crean una mejor alternativa.

Answer 3

Por lo que yo sé utilizando porcentaje de anchura / altura debería funcionar bien.

Answer 4

Me responde segundo de perfectDay, pero yo pediría que volverse loco y tratar de describir lo que desea que se vea como. Tal vez con ascii-arte o un enlace a un gráfico, así que sabemos lo diseño con el que nos gusta para ayudarle a alcanzar.

También me gustaría añadir que no he estado durmiendo (de nuevo) recientemente, así que ... si me he perdido una descripción obvia súper clara de lo que nos gustaría ayudarle a alcanzar tienes mi más disculpas sinceras. :)