elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía actualizada para evitar que un ransomware ataque tu empresa


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ocupar el espacio restante de un contenedor, help!
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ocupar el espacio restante de un contenedor, help!  (Leído 763 veces)
JugadorON

Desconectado Desconectado

Mensajes: 120


Ver Perfil
Ocupar el espacio restante de un contenedor, help!
« en: 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:
<!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:
<!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..


En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.245


I'm fourth.


Ver Perfil WWW
Re: Ocupar el espacio restante de un contenedor, help!
« Respuesta #1 en: 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
  1. <div class="container">
  2.  <div class="a">
  3.  </div>
  4.    <div class="b">
  5.  </div>
  6.    <div class="c">
  7.  </div>
  8. </div>

Código
  1. .container {
  2.  background-color: black;
  3.  display: flex;
  4.  flex-direction: column;
  5.  height: 1000px;
  6. }
  7.  
  8. .a {
  9.  background-color: #FF9800;
  10.  height: 100px;
  11. }
  12.  
  13. .b {
  14.  background-color: #FFEB3B;
  15.  flex-grow: 1;
  16. }
  17.  
  18. .c {
  19.  background-color: #FF9800;
  20.  height: 100px;
  21. }
  22.  

https://jsfiddle.net/tzv1eyp2/


En línea

@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.293


Turn off the red ligth


Ver Perfil WWW
Re: Ocupar el espacio restante de un contenedor, help!
« Respuesta #2 en: 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
En línea

JugadorON

Desconectado Desconectado

Mensajes: 120


Ver Perfil
Re: Ocupar el espacio restante de un contenedor, help!
« Respuesta #3 en: 13 Enero 2021, 11:45 am »

Muchas gracias a los 2, me habéis ayudado mucho  ;D

Resuelto!
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como puedo ocupar todo el anchode banda de internet?
Redes
Nheo_X 8 7,763 Último mensaje 3 Julio 2010, 01:32 am
por Nheo_X
[SOLUCIONADO] Calcular el tiempo restante
.NET (C#, VB.NET, ASP)
Eleкtro 2 2,699 Último mensaje 28 Marzo 2013, 05:57 am
por Crazy.sx
ocupar disco duro
Dudas Generales
jemez44 9 1,618 Último mensaje 24 Noviembre 2013, 13:51 pm
por HackID1
La inteligencia artificial podría ocupar el 50% de todos los puestos de trabajo
Noticias
wolfbcn 0 802 Último mensaje 29 Abril 2017, 02:48 am
por wolfbcn
Vida restante de un disco duro
Hardware
zagk 4 1,825 Último mensaje 9 Mayo 2017, 20:36 pm
por zagk
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines