1. Inicio
  2. Pregunta y respuesta
  3. Dos columnas flotantes - una fija, una anchura libre

Dos columnas flotantes - una fija, una anchura libre

2011-01-13 14 views
37

Miré alrededor de SO, pero no puedo encontrar una que coincida con mi ocurrencia, básicamente tengo dos columnas de ancho fijo (185px) y la otra columna no tiene ancho fijo, sin embargo, necesito la última columna para llenar el último espacio, por ejemploDos columnas flotantes - una fija, una anchura libre

........................................... 
.--------- ------------------------------. 
.+  + +       +. 
.+  + +       +. 
.+  + +       +. 
.+  + +       +. 
.+  + ------------------------------. 
.+  +        . 
.+  +        . 
.+  +        . 
.---------        . 
...........................................

La primera columna debe ser siempre 100% a la parte inferior cuando la segunda columna llena la anchura restante, que ambos están flotando left, si cambiar el tamaño de la ventana del navegador, la segunda columna muestra bajo la primera columna. Necesito la segunda columna para completar el ancho restante y ser flexible al cambiar el tamaño de la ventana del navegador.

Fuente

2011-01-13 MacMac

Respuesta

2

Eche un vistazo a this. No hay demos, pero he usado tutoriales de este chico antes, así que supongo que funciona bien. Deduzco del artículo que el contenido principal es líquido. El contenido lateral también puede ser líquido, pero creo que puedes darle un ancho fijo y dejarlo así. El truco aquí es colocar primero el contenido principal.

Fuente

2011-01-13 03:23:29 Zomxilla

4

Editado la solución, esta vez utilizando FlexBox, hizo que la columna de la izquierda fija usando flex: 185px 0 0; luego hizo la columna auto adecuado crecer usando flex-grow:1

*{ 
 
    box-sizing: border-box; 
 
} 
 

 
body{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
#container{ 
 
    display:flex; 
 
} 
 

 
#left{ 
 
    height: 100vh; 
 
    flex: 185px 0 0; 
 
    background-color:tomato; 
 
} 
 

 
#right{ 
 
    flex-grow: 1; 
 
} 
 

 
#right > div{ 
 
    background:pink; 
 
}
<body> 
 
    <div id="container"> 
 
     <div id="left"> Left </div> 
 
     <div id="right"> 
 
     <div> 
 
     Right <br/> 
 
     dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body>

Fuente

2011-01-13 03:25:54

+5

La columna de la derecha no rellenará automáticamente el espacio disponible como este, sino que utilizará la sala mínima requerida para mostrar su contenido. –

+0

@TimothyGroote aquí está mi solución actualizada usando '' 'flexbox''', la columna de la derecha debería ahora llenar/crecer al espacio disponible https://jsfiddle.net/ouymLfoz/ gracias. –

+1

Ok, eso parece funcionar. pero ¿por qué no acabas de actualizar la respuesta? –

62

De hecho, hay una manera más fácil de hacerlo de usar flotadores:

.container { 
    position: relative; 
} 

.left { 
    width: 185px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.right { 
    margin-left: 185px; 
}

Fuente

2011-01-13 03:26:29 Jacob

+7

Esto funciona muy bien ... pero después del contenedor tengo pie de página ... lo que sucede es ... el pie de página no va detrás del contenedor ... sino que se convierte en el medio del contenedor. – rkaartikeyan

+0

@Jacob ¿es posible usar% en lugar de píxeles específicos? – Silentbang

+0

Sí, @silentbang. – Jacob

1

Si no desea utilizar ni floa ts ni el posicionamiento absoluto, el más fácil que podía venir fue

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     body { 
     white-space: nowrap; 
     } 
     div.left { 
     display: inline-block; 
     width: 200px; 
     white-space: normal; 
     background-color: red; 
     vertical-align: top; 
     } 
     div.right { 
     display: inline-block; 
     white-space: normal; 
     background-color: green; 
     } 
    </style> 
    <title></title> 
    </head> 
    <body> 
    <div class="left"> 
     left 
    </div> 
    <div class="right"> 
     right 
    </div> 
    </body> 
</html>

Fuente

2013-05-08 12:37:56 Sebastian

1

La "posición: absolute;" la respuesta es bastante buena, pero tiene implicaciones de navegador cruzado, especialmente si está desarrollando para IE. La mejor manera de lograr esto es la siguiente:

<html> 
<head> 
<style> 
    div.right { 
     float: right; 
     width: 200px; 
    } 
    div.left { 
     margin-right: 200px; 
    } 
    div.clear { 
     clear: both; 
    } 
</style> 
</head> 
<body> 
    <div class="right"><!--your code here--></div> 
    <div class="left"><!--your code here--></div> 
    <div class="clear"></div> 
</body> 
</html>

Tenga en cuenta que el div que necesita en el lado derecho se llama por primera vez en el código HTML. Además, tenga en cuenta el borrado del flotador después de las columnas, que será útil si tiene contenido a continuación, o si hay un contenedor principal.

Fuente

2014-02-06 18:13:12

+0

Nota; es una mala práctica tener estilos en la sección principal, independientemente de si se trata de una demostración. También es una mala práctica seleccionar elementos en CSS por nombre de elemento y nombre de clase (por ejemplo, div.right); solo el nombre de la clase será suficiente. – TheCarver

Cuestiones relacionadas

 Cuestiones relacionadas