Cómo distribuir div en html

Estoy atrapado tratando de diseñar con precisión un elemento en mi página. Espero que alguien me pueda ayudar.

Por favor revisa http://jsfiddle.net/malaikuangren/5ssqP/2/show/ .

Gracias.

Mi lista de preguntas confusas:

  • No sé por qué hay un espacio encima del dev-footer aunque he calculado con precisión la altura de los elementos (puede ver lo que hice en el evento listo para documentos)
  • Este problema también es con el contenido de la tabla del derecho de página
  • Intenta duplicar más filas para ver qué sucede

Gracias.

No use Javascript para cambiar el tamaño de estos elementos. Prefiere usar CSS directamente. Esto le permitirá escribir un código más limpio que es más fácil de editar y tiene un mejor rendimiento. En el caso particular, no es necesario calcular manualmente la altura usando Javascript. En su lugar, utilice el posicionamiento CSS para lograr los resultados deseados.

Específicamente, establezca su div de contenido principal para ocupar toda la página en altura, excluyendo el pie de página y el encabezado de la siguiente manera:

 #content { position: fixed; bottom: 40px; top: 100px; } 

A continuación, ajuste el contenido de ese div para que ocupe todo el espacio que desee sobre la marcha. Por ejemplo, desea que su titular de barra lateral ocupe toda la altura del div # contenido. Por lo tanto, el siguiente código CSS es suficiente:

 #sidebar-holder { position: absolute; top: 0; bottom: 0; } 

Del mismo modo, su div “divisor” se puede posicionar utilizando el posicionamiento CSS, pero se implementa mejor utilizando un borde CSS:

 #sidebar-holder { border-right: 5px solid black; } 

Para evitar el posicionamiento absoluto extensivo e inmanejable, use la position: relative directiva position: relative en sus elementos y position:absolute padres position:absolute dentro de los elementos secundarios. Esta técnica le permite colocar elementos secundarios en coordenadas absolutas dentro de un cuadro definido por su elemento primario relativo más cercano. Por lo tanto, las coordenadas (0, 0) corresponden a la esquina superior izquierda del cuadro principal.

He reproducido en tu código el comportamiento completo que deseas usando solo CSS y soluciona tus problemas directamente, sin cálculos desordenados de valor de píxel. Además, reemplazar Javascript con CSS hace que se comporte correctamente al cambiar el tamaño de la página y no requiere volver a ejecutar su código jQuery en eventos de cambio de tamaño.

No tiene suficiente contenido para llenar el espacio entre el footer y su content . Si miras la página cuando no tienes la pantalla maximizada, no hay un espacio. Hay muchas formas de arreglarlo. Aumentaría la height del pie de página o boostía la min-height de su contenido. Realmente, depende de ti.