Me estoy volviendo loco con el tema de rellenar un DIV

[Kromikos]

Hola chicos, mirad.

Tengo una plantilla de tres columnas y la de en medio irá con divs que tendrán un background del 100% del tamaño del div (el background lo pongo para poder poner luego texto encima de la imagen).

La cosa es que relleno el div de en medio con una lista y dentro de esta lista varios div con background. Es algo así:



Pero dependiendo del tamaño de la ventana el div principal no se rellena y me gustaría que los divs se adaptasen para rellenar el div principal entero.

Os lo pongo con otra foto:



Ya me estoy volviendo loco porque no tengo ni idea de qué hacer.

Os dejo el código a ver si podéis ayudarme.

HTML:

Código HTML:

<div class="col col2">
    	<ul class="ulprod">
             <li><div class="prod"></div></li>
             <li><div class="prod"></div></li>
             <li><div class="prod"></div></li>
             <li><div class="prod"></div></li>
             <li><div class="prod"></div></li>
             <li><div class="prod"></div></li>
             <li><div class="prod"></div></li>
             <li><div class="prod"></div></li>
             <li><div class="prod"></div></li>
             <li><div class="prod"></div></li>
        </ul>
</div> 

CSS:

Código:

.col {
	display: flex;
        display: -webkit-flex;
	flex-flow: row wrap;
        -webkit-flex-flow: row wrap;
	float:left;
	margin: 0;
	padding: 0;
}

.col2 {
	width: 60%;
	background-color: green;

}
.col2 li{
	margin: 0;
	float:left;
	list-style-type: none;  
}

.ulprod{
	margin: 2px;
	padding: 2px;
	}
	
.prod{
	height: 100px;
	width: 170px;
	margin-right: 3px;
	margin-bottom: 3px;
	background-size:100% 100%;
	background-repeat:no-repeat;
	background-image: url('http://www.conjuntobcn.com/img/assessoria_imatge.jpg');
	}

No sé ya cómo hacerlo. Sé que tienen un tamaño fijo los divs "prod" pero no sé qué hacer para que se adapte al div entero.

[pzin]

Tienes un código un poco loco. ¿Para qué usas FlexBox si realmente no lo usas?

Realmente sólo tendrías que especificar que cada li ocupe una tercera parte, y añadir o cambiar dos pequeños cambios adicionales:

Código CSS:

.col2 li {
  width: 33.33333%;
}
 
.ulprod  {
  width: 100%;
}
 
.prod {
  width: 100%;
}
 

Por otro lado esas imágenes más que fondos se me hacen que deberían ser realmente imágenes. ¿O no?

[Kromikos]

Iniciado por pzin

Tienes un código un poco loco. ¿Para qué usas FlexBox si realmente no lo usas?

Realmente sólo tendrías que especificar que cada li ocupe una tercera parte, y añadir o cambiar dos pequeños cambios adicionales:

Código CSS:

.col2 li {
  width: 33.33333%;
}
 
.ulprod  {
  width: 100%;
}
 
.prod {
  width: 100%;
}
 

Por otro lado esas imágenes más que fondos se me hacen que deberían ser realmente imágenes. ¿O no?

Buenas y ante todo gracias por responder. Mis respetos y es que esto me está llevando a un punto que necesito terminarlo para empezar a meterlo todo en la plantila y no me está saliendo.

El tema de flexbox está ahí porque cogí una plantilla que utilizaba flexbox para ver si así se adaptaban mis contenidos a ésta.

Pero me refería más a si hay alguna forma de que cambien todos de tamaño, quiero decir que la persona que tenga un monitor gigante vea 10 por fila y en cambio yo con mi monitor tan sólo 3. Que cambien proporcionalmente.

¿Me explico?

[pzin]

Iniciado por Kromikos

Pero me refería más a si hay alguna forma de que cambien todos de tamaño, quiero decir que la persona que tenga un monitor gigante vea 10 por fila y en cambio yo con mi monitor tan sólo 3. Que cambien proporcionalmente.

Si también eso. Tendrías que usar media-queries y crear, lo que viene siendo, una cosa responsiva —Responsive Web Design (RWD).

Agrupas reglas dentro de esas media-queries, que es su consulta puedes especificar anchos de pantalla, que es lo que te interesa, y en base a ese cambiarle, por ejemplo, ese porcentaje de 33.3333% a cómo quieres que se vea.

Algo así:

Código CSS:

.col2 li {
    width: 33.3333%;
  }
 
@media screen and (min-width: 960px) and (max-width: 1500px) {
  .col2 li {
    width: 20%;
  }
}
 
@media screen and (min-width: 1501px) {
  .col2 li {
    width: 10%;
  }
}
 

En cada regla @media puedes agrupar las reglas que necesites para cada situación. Luego siempre puedes echarle un vistazo a Google ahora que sabes qué buscar específicamente.

[Kromikos]

Iniciado por pzin

Si también eso. Tendrías que usar media-queries y crear, lo que viene siendo, una cosa responsiva —Responsive Web Design (RWD).

Agrupas reglas dentro de esas media-queries, que es su consulta puedes especificar anchos de pantalla, que es lo que te interesa, y en base a ese cambiarle, por ejemplo, ese porcentaje de 33.3333% a cómo quieres que se vea.

Algo así:

Código CSS:

.col2 li {
    width: 33.3333%;
  }
 
@media screen and (min-width: 960px) and (max-width: 1500px) {
  .col2 li {
    width: 20%;
  }
}
 
@media screen and (min-width: 1501px) {
  .col2 li {
    width: 10%;
  }
}
 

En cada regla @media puedes agrupar las reglas que necesites para cada situación. Luego siempre puedes echarle un vistazo a Google ahora que sabes qué buscar específicamente.

Gracias pzin.

¿Y no hay forma de hacerlo así con un FlexBox? ¿Que se ordene todo automáticamente?

Es que quiero que se adapten a la pantalla, que no se salgan. No sé si basta con el width y height del body al 100%.

Y esa era mi pregunta también, si se puede hacer con FlexBox algo así dinámico, que me lo han pedido.

Muchas gracias

[pzin]

Uhmmm... ¿Dices que adapta todo completamente a la pantalla? Filas según altura, y la altura según las filas... FlexBox no hace magia, o si, de momento sólo he experimentado un poco.
¿Qué pasaría en una pantalla pequeña? ¿Se verían 20x20 píxeles?

Poder se puede hacer seguro, pero seguramente no es una cosa fácil.

De todas formas piénsalo bien, ya que la teoría dice que primero pienses cómo se verá eso en pantallas pequeñas, y luego a partir de ahí vas aumentado el concepto; aquello de mobile first.