Ocupar el espacio restante de un contenedor, help!

Iniciado por JugadorON, 13 Enero 2021, 02:06 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

JugadorON

13 Enero 2021, 02:06 AM
Hola, necesito un poquitín de ayuda porfa.

Quiero que el cuadro amarillo ocupe el resto del espacio del cuadro negro.

Código [Seleccionar]
<!DOCTYPE html>
<html>
<div style="background-color: black; width: 1000px; height: 1000px">

<div style="background-color: #FF9800; width: 100%; height: 100px">
</div>

<div style="background-color: #FFEB3B; width: 100%; height: 100px">
</div>

<div style="background-color: #FF9800; width: 100%; height: 100px">
</div>

</div>
</html>

Pero esto es lo que sucede cuando le pongo height: 100%

Se sale del cuadro negro.

Código [Seleccionar]
<!DOCTYPE html>
<html>
<div style="background-color: black; width: 1000px; height: 1000px">

<div style="background-color: #FF9800; width: 100%; height: 100px">
</div>

<div style="background-color: #FFEB3B; width: 100%; height: 100%">
</div>

<div style="background-color: #FF9800; width: 100%; height: 100px">
</div>

</div>
</html>

Qué hago mal?, no sé mucho sobre eesto..

MinusFour

#1
13 Enero 2021, 02:40 AM
El porcentaje es del padre. Así que ese contenedor tendrá el 100% del tamaño del padre (1000px). Mejor usa flex:

Código (html) [Seleccionar]

<div class="container">
 <div class="a">
 </div>
   <div class="b">
 </div>
   <div class="c">
 </div>
</div>

Código (css) [Seleccionar]

.container {
 background-color: black;
 display: flex;
 flex-direction: column;
 height: 1000px;
}

.a {
 background-color: #FF9800;
 height: 100px;
}

.b {
 background-color: #FFEB3B;
 flex-grow: 1;
}

.c {
 background-color: #FF9800;
 height: 100px;
}


https://jsfiddle.net/tzv1eyp2/

@XSStringManolo

#2
13 Enero 2021, 04:17 AM
El % hace referencia al documento.

100% es el 100% del documento.

En tu caso el documento son el primer div con 1000px de alto, y los otros divs con 100px cada uno.

Sin contar el div que quieres centrar tienes el primer div con 1000px, el segundo div con 100px y el cuarto div con 100px.

Ponte en el caso de que no sabes el tamaño del primer div. Puedes usar calc para hacer cálculos a partir del tamaño del documento:

<div style="background-color: #FFEB3B; width: 100%; height: calc(100% - 100px - 100px - 10px)">   </div>

Esos últimos 10px te los puse para que veas un trozito negro para confirmas que está ocupando justo el espacio que quieres.

En tu caso al poner 1000px, estás limitando la resolución. Si por ejemplo tengo una pantalla de 4000 px, tu div solo me ocupará 1/4 de la pantalla de alto. Como en el width si que usas el 100%, en todas las pantallas se verás algo distinto. Por eso te recomiendo que uses el height también como %.
Por ejemplo le pones al body el 100%, al primer div el 50% al secundo el 5%, etc

JugadorON

#3
13 Enero 2021, 11:45 AM
Muchas gracias a los 2, me habéis ayudado mucho  ;D

Resuelto!
Imprimir
Ir Arriba Páginas1
Acciones del Usuario