1

Necesito que solo ocupe el espacio entre el div de arriba y el div de abajo pero sin sobreponerse utilizo height:100%; con un margen por arriba pero entonces el div "contenido" queda encima del que esta abajo

.arriba{
position:fixed;
top:0px;
heigh:30px;
width:100%;
}
.abajo{
position:fixed;
top:0px;
heigh:30px;
width:100%;
}
.contenido{
height:100%;
margin-top:30px;
}
<div class="arriba">Arriba</div>
<div class="contenido">"contenido"</div>
<div class="abajo">Abajo</div>

1
  • Título != Descripción.
    – fredyfx
    Commented el 10 abr. 2020 a las 21:28

2 respuestas 2

1

Nota

Considera que aunque tu maquetación se puede considerar funcional, por ejemplo en la sección final o de abajo tendrás problemas para mostrar el contenido que quieras agregar y no se verá completamente por lo que deberás empezar a recurrir a mas reglas CSS como la manejo de los margins para que logres moverlo de su ubicación y mostrarlo; pero al mismo tiempo teniendo cuidado que eso no mueva el resto de tu maquetación.

Dado todo lo anterior propongo:

  • Cuando modificas el position de las etiquetas HTML las estás sacando del flujo de acomodo regular que poseen
  • Como estás indicando un position distinto al regular necesitas moverlas con las reglas:
    • top
    • left
    • right
    • bottom
  • Como a los div cuyas clases son arriba y abajo les dejas el top en 0 entonces los dos parten de quedar posicionados sin avance desde dicha ubicación y por eso se enciman
  • En este caso dado el acomodo que deseas lo mejor sería envolver los 3 elementos en un contenedor extra que sea de naturaleza flex y lo podamos manipular para que se vea como columnas
  • Ahora del 100% del viewport lo dividimos en por ejemplo
    • 20% al inicio
    • 60% al contenido
    • 20% al fin
  • Cómo los div tienen naturaleza de bloque salvo otra configuración no es necesario dar la indicación de 100%

EJEMPLO

    <style>
      body {
        color: white;
        margin: 0;
      }
      .contenedor-secciones {
        display: flex;
        flex-direction: column
      }
      .arriba {
        height: 20vh;
        background-color: red;
      }
      .contenido {
        height: 60vh;
        background-color: green;
      }
      .abajo {
        height: 20vh;
        background-color: brown;
      }
    </style>
    
    <div class="contenedor-secciones">
      <div class="arriba">Arriba</div>
      <div class="contenido">"contenido"</div>
      <div class="abajo">Abajo</div>
    </div>

0

Lo único que te faltaba para poner el contenido en medio era poner es div en medio y tenias tu CSS, en la parte de abajo, en tu position: fixed;, tenias top : 0px; y eso hace que superponga con el div arriba.

.arriba{
    position:fixed;
    top:0px;
    height:30px;
    width:100%;
}
.abajo{
    position:fixed;
    bottom:0px;
    height:30px;
    width:100%;
}

.contenido{
        height:100%;
        margin-top:30px;
        }
<div class="arriba">Arriba</div>
<div class="contenido">contenido</div>
<div class="abajo">Abajo</div>

Espero que esto te sirva.

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.