Si queremos agregar una línea de pie de página al final del diseño de 3 columnas para poner información como derechos de autor. Me encontré con el problema de tener que alinear la parte inferior de 3 columnas. En el diseño de la tabla, utilizamos el método de anidar tablas grandes en tablas pequeñas, lo que puede alinear fácilmente las tres columnas con el diseño div, las tres columnas están dispersas de forma independiente y el contenido tiene diferentes alturas, lo que dificulta la alineación. De hecho, podemos anidar completamente divs y colocar tres columnas en un DIV para lograr la alineación inferior. El siguiente es un ejemplo de implementación (un cuadro con fondo blanco simula una página):
Cuerpo
El código principal de esta página de ejemplo es el siguiente:
<div id="encabezado"></div>
<div id="cuadro principal">
<div id="menú"></div>
<div id="barra lateral"></div>
<div id="contenido"></div>
</div>
<div id="pie de página"></div>
Las hojas de estilo específicas están escritas en los apartados correspondientes. El punto clave es que la capa #mainbox está anidada en tres capas: #menú, #barra lateral y #contenido. Cuando el contenido de #content aumenta, la altura del #content aumentará, la altura del #mainbox también se expandirá y la capa #footer se moverá automáticamente hacia abajo. De esta manera se consigue un alto grado de adaptabilidad.
También vale la pena señalar que #menú y #contenido están flotando en el lado derecho de la página "FLOAT: derecha;", #barra lateral está flotando en el lado izquierdo de la capa #menú "FLOAT: izquierda;", este es el Posicionamiento del método flotante, y también puede utilizar el posicionamiento absoluto para lograr este efecto.
Otro problema con este método es que el fondo de la barra lateral #sidebar no puede ser al 100%. La solución general es rellenarlo con el color de fondo del cuerpo. (El color de fondo de #mainbox no se puede utilizar porque el color de fondo de #mainbox no es válido en navegadores como Mozilla).
Bien, se ha construido el marco principal, el trabajo restante es solo agregarle ladrillos y tejas. Si quieres probar otros diseños, te recomiendo leer los siguientes artículos:
16 ejemplos de diseño CSS
onestab: demostración de diseño compuesto de tres columnas
onestab: diseño de tres columnas que se puede estirar libremente
