CSS: dos columnas (fijo / fluido) - misma altura

StackOverflow https://stackoverflow.com/questions/1784841

  •  21-09-2019
  •  | 
  •  

Pregunta

¿Cuál es la mejor manera de hacer esta cosa sencilla?

  • columna de la izquierda, ancho fijo, fondo amarillo decir
  • columna principal, resto de la pantalla

columna principal contendrá el texto de longitud indefinida, y quiero que la columna de la izquierda para ser tan alto como el principal no importa cual es el contenido. Sin cabecera, sin pie de página, sólo la pantalla se dividió en dos, pero la izquierda debe rellena todo el espacio de la toma principal. No JavaScript.

Gracias.

EDIT: puede ser esto (diseño muy básico) hacerse sin trucos como imágenes de fondo o valores de margen absurdos? Estoy tratando de pasar del enfoque de la tabla despreciado, pero hasta ahora estoy viendo sólo eso CSS diseños siempre requieren algún truco, incluso para hacer las cosas más fáciles.

¿Fue útil?

Solución 3

Así que, básicamente, la respuesta a la pregunta "¿se puede hacer esto sin trucos" es: n

.

Otros consejos

I suelen tener dos divs:. La exterior contendría el contenido barra lateral que yo quiero tener la misma altura que la columna principal, y el div interior sería la columna principal 

-----------------------------
|      -------------------- |
|      |                  | |
|      |                  | |
|      |                  | |
|      -------------------- |
-----------------------------

De esta manera, los interiores / principales div fuerzas del exterior / barra lateral div ser la misma altura que el interior / principal. Sólo float:right el div interior / principal, establecer el exterior / barra lateral div ser width:100%, y especificar que el div interior / principal tiene un margen izquierdo, para permitir la barra lateral, por ejemplo, margin-left:20%. 

<div class="outer">
  <div class="inner">
    --main content--
  </div>
  --sidebar content--
</div>

Actualización: lo siento, tuve el contenido de la barra lateral se muestra en el lugar equivocado. Debe ser a continuación el div interior / principal para que el div interior / principal aparece junto a la derecha cuando se flota. Ejemplo CSS: 

div.outer {
  width: 100%;
}

div.inner {
  margin-left: 20%; /* width of sidebar */
  float: right;
}

Aquí hay una maqueta rápido. La columna principal se llena en posición horizontal mientras lo utiliza. Se podría establecer el ancho de la columna principal si se conoce el ancho de la columna izquierda ya. 

<html>
<head>
<style>
#leftCol
{
width:350px;
height:100%;
float:left;
background-color:#FFFF33;
}
#mainCol
{
width:53%;
height:100%;
float:left;
background-color:#CC0033;
}
#wrapper
{
width:100%;
}
.clearFix
{
clear:both;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="leftCol">tfgsrrtgrt

</div>
<div id="mainCol">gtrgdrtgthdyhtyhtyhydthtr

</div>
<div class="clearFix"></div>
</div>
</body>
</html>

Espero que esto funcione para usted.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top