8
Tengo dos columnas una al lado de la otra que son de diferentes colores. El fondo tiene un color único también. La columna de la derecha contiene texto que se expandirá a una altura desconocida. La otra columna contiene poco o nada.CSS alternativo a este código CSS-jQuery?
<div id="container">
<div id="leftColumn">
<p>Only one small paragraph here</p>
</div>
<div id="rightColumn">
<p>Many large paragraphs inside here.</p>
</div>
</div>
Me gustaría que la columna de la izquierda sea la altura exacta de la columna de la derecha.
Aquí está la CSS ...
#leftColumn {
display:inline-block;
width: 200px;
}
#rightColumn {
display:inline-block;
width: 600px;
vertical-align: top;
}
Así que cuando se carga la página que utilizan jQuery para ajustar la altura de la columna de la izquierda en base a la altura de la columna de la derecha.
$(document).ready(function() {
$('#leftColumn').css('height', $('#rightColumn').innerHeight());
});
¿Hay alguna manera de hacer esto con solo CSS?
CSS puede no ser la única herramienta para el trabajo cuando otras herramientas se prestan mejor a un probl em. Las tablas HTML no son malvadas; aunque pudieron haberse usado en exceso en el pasado antes de un buen soporte de CSS, las Tablas aún tienen su lugar.Cuando habla alturas iguales, las tablas lo tienen automáticamente y aún se pueden controlar a través de CSS, para una solución híbrida que utiliza lo mejor de ambos mundos. De lo contrario, puede complicarse rápidamente si se usa una herramienta para excluir a los demás por el simple hecho de hacerlo. –
Luego, de nuevo, el autor solicitó una solución única de CSS, por lo que quizás tratar de hacer cumplir nuestros ideales con la exclusión de responder directamente la pregunta es trabajar en contra del proceso. –