¿Cómo puedo obtener tres columnas, hermanos divs, cada uno se expanden para llenar su matriz?

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

  •  18-09-2019
  •  | 
  •  

Pregunta

He estado buscando siempre. En este momento, estoy bastante desesperada en este momento así que pensé que pediría aquí. A continuación se muestra una versión HTML. Cuando la columna B es más largo que una sola página (puerto de vista, lo siento, no estoy seguro sobre la terminología correcta aquí) entonces A y C no se están expandiendo en altura para llenar el contenedor div. Se llenan toda la página, pero se detienen en una sola longitud de la página, incluso si la columna B es más largo que una sola página. Cualquier idea, he estado tomando el pelo. He estado jugando con la altura y min-height y nada parece funcionar. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
        <style type="text/css">
            html, body 
            {
                height: 100%;
                background-color: gray;
                padding: 0;
                margin: 0;
            }

            #container
            {
                height: 100%;
                margin: auto;
                padding: 0px;
                width: 610px;
            }

            #a
            {
                width: 5px;
                min-height: 100%;
                float: left;
                background-color: yellow;
            }

            #b
            {
                width: 600px;
                background-color: Blue;
                float:left;
                min-height: 100%;
            }

            #c
            {
                width: 5px;
                float:left;
                min-height: 100%;
                background-color: green;
            }
        </style>
</head>
<body>
        <div id="container">
            <div id="a"></div>
            <div id="b">
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
            </div>
            <div id="c"></div>
    </div>
</body>
</html>

EDIT: Antes de perder el tiempo de alguien explicar a mí sobre el acaparamiento de un pixel horizontal y luego el embaldosado es que el diseñador me dio un gradiente vertical. A partir oscuro en la parte superior y terminando más ligero. Que, además de un efecto de sombra. La sombra se extiende horizontalmente. Así que no hay manera de cortar esto y luego usar un uso inteligente de mosaico por lo que yo sé.

¿Fue útil?

Solución

¿has visto las columnas de imitación engañar?

Otros consejos

Por el momento, la manera más fácil de hacer esto es utilizar una sola fila de la tabla en lugar de los divs. Tabla de que no puede ser la manera fresca uber de hacer las cosas, pero al final del día que acaba de trabajar para un conjunto mucho menos código que tratar de lograr lo mismo con CSS.

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