3

Tengo un contenedor superior (NAVBAR) que tiene la clase position fixed de bootstrap, y un footer que tiene fixed-bottom, quiero tener contenedor en medio de estos 2 pero todo lo que he intentado ha fallado. Se que el nabvar y el footer al tener position fixed se salen del flujo normal y por eso el contenedor que quiero en el medio no respeta la posición de estos, pero como podría ubicarlo en el medio de estos? este tercer contenedor también tiene position fixed ya que quiero scroll en mi página.

¿ Que he intentado ?

se que el tercer contenedor al tener position fixed obedece a las propiedades top, bottom. Inspeccioné la altura que tiene tanto el navbar como el footer y es de 56px, así que intenté aplicar top: 56px; bottom: 56px; al contenedor del medio y no se porque solo obedece al top, el bottom no funciona, ademas intente agregar un contenedor padre (img-cont) al contenedor del medio (main) , y jugar con el paddin-top y pagging-bottom del padre pero pasa lo mismo, no me toma el padding-bottom. que podría hacer para resolver este problema?

Estoy trabajando con Angular y Bootstrap 4, pero para compartir el código acá decidí hacerlo en stackblitz y junte todo el html en un archivo y lo mismo con el css, tengo horas en esto y no he podido solucionar, acá está el link de stackblitz:

código

Acá explico de manera visual lo que quiero lograr:

actualmente está así:

introducir la descripción de la imagen aquí

Si ven, el contenedor main (que es el contenedor que quiero en el medio del navbar y el footer) cuándo lo inspecciono me abarca todo el espacio. lo que quiero es que dicho contenedor comience debajo del navbar y termine donde comienza el footer, es decir, que su tamaño solo abarque el cuadro blanco que muestro a continuación:

introducir la descripción de la imagen aquí

¿Como podría hacer eso?

Gracias de antemano al que me pueda ayudar.

1
  • Bueno, si solo te obedece a un lado en dirección vertical, es porque el elemento tiene un alto definido, de lo contrario, se estiraría en ambas direcciones hasta satisfacer las dos restricciones.
    – Unknow
    Commented el 12 sept. 2020 a las 17:11

2 respuestas 2

2

Si los 3 contenedores están fixed, dale el tamaño de la pantalla a tu contenedor menos el espacio en pixeles que ocupan tu footer y header, asi:

main {
   height: calc(100vh - 112px);
   top: 56px;
}

De esta forma el contenedor toma el height del viewport menos el alto de tu header y footer juntos, y se coloca a 56px del top, que es el alto de tu header.

8
  • Esto me funcionó, muchas gracias!
    – JulianProg
    Commented el 12 sept. 2020 a las 17:17
  • Disculpa, tendrás tiempo para una consulta en el chat? es sobre el mismo tema, estaré atento a tu respuesta.
    – JulianProg
    Commented el 12 sept. 2020 a las 20:28
  • Disculpa amigo, no me había conectado, que necesitas?
    – Elboy
    Commented el 14 sept. 2020 a las 1:40
  • Quería hacerte una consultas referentes al mismo tema, si es posible claro.
    – JulianProg
    Commented el 14 sept. 2020 a las 2:08
  • Dime, cual es tu consulta
    – Elboy
    Commented el 14 sept. 2020 a las 15:03
0

No definas un alto en el elemento, si no, solo va a aplicar la propiedad top.

.position-fixed{
  position: fixed;
}

.top-bar{
  top: 0;
  left: 0;
  background: brown;
}

.bottom-bar{
  bottom: 0;
  left: 0;
  background: pink;
  
}

body{
 height: 100vh;
 background: teal;
}

.bottom-bar,.top-bar{
  height: 57px;
  width: 100%;
}

.content{
  top:57px;
  bottom: 57px;
  background-color: orange;
  width: 100%;
}
<div class="position-fixed top-bar">
   Unos links
</div>

<div class="content position-fixed">
   <button>Comenzar</button>
</div>

<div class="position-fixed bottom-bar">
  Texto de footer
</div>

When both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. In all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored.

Puedes consultar aquí la fuente

9
  • Ok, eso no lo he leído en ninguna documentación. otra cosa... si tengo un contenedor padre con altura 100vh y defino un contenedor la altura de un contenedor hijo al 100% el máximo de altura del contenedor hijo sería la altura del contenedor padre?
    – JulianProg
    Commented el 12 sept. 2020 a las 19:09
  • ¿De qué manera esto es compatible con las clases CSS implementadas por el OP basadas en Bootstrap? Commented el 13 sept. 2020 a las 5:02
  • Pues en el código fuente de ejemplo que vi, esa parte del problema que quería resolver, no estaba hecha en bootstrap, estaba con CSS puro.
    – Unknow
    Commented el 13 sept. 2020 a las 16:22
  • @JulianProg Si te refieres a tener un hijo dentro del elemento de en medio, que es el que tiene top y bottom, si, si le das 100% va a tener la altura del padre y en cuanto a lo que comentas sobre la documentación, voy a buscar ese fragmento para colocarlo en mi respuesta
    – Unknow
    Commented el 13 sept. 2020 a las 16:26
  • @Unknow Ok, gracias por la ayuda. Una última pregunta... Así como lo estoy haciendo está mal? Lo resolví como me comentaron en la respuesta anterior a la tuya, calculando el 100vh - (altura de los de más elementos) ? Tuve que colocar eso también en las media querías para ajustarlo ya que algunos contenedores cambian su tamaño debido a que modificó la fuente de la letra. No se si hay una mejor forma para evitar hacer esos cálculos, o si es incorrecta la forma que uso?
    – JulianProg
    Commented el 13 sept. 2020 a las 23:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.