0

tengo que ajustar un div el problema esta en que se debe ajustar el height dependiendo del dispositivo ya que este panel esta entre dos div distintos. He utilizado la propiedad @media only screen (y he usado bastantes) pero puede que aparezcan espacios en blanco o margenes porque no se como hacer que ajuste su altura dinámica o automáticamente con respecto a los otros dos contenedores cuando varie la resolucion del dispositivo.

Ejemplo:

<div>Panel 1 (fijo)</div>
<div class="scroll">Panel que se debe ajustar la altura automaticamente</div>
<div>Panel 2 (fijo)</div>

1
  • 1
    ¿has utilizado porcentajes para la altura? Commented el 15 nov. 2019 a las 22:34

1 respuesta 1

1

Puedes utilizar desde el javascript la propiedad innerHeight y así obtener el tamaño de tu dispositivo, ya conociendo tamaño total puedes ajustar el tamaño de tu caja como desees. Lo mismo puedes hacerlo con las demás cajas.

var height = window.innerHeight;
var elementDiv = $("#divHeight")[0];
elementDiv.style.height = height + "px";
.div-1 {
  height: 100px;
  background-color: red;
}

.div-2 {
  background-color: yellow;
}

.div-3 {
  height: 100px;
  background-color: green;
}

.container {
  display: flex;
  justify-content: space-between;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="div-1 col-sm-4">Div 1</div>
  <div class="div-2 col-sm-4" id="divHeight">Div 2</div>
  <div class="div-3 col-sm-4">Div 3</div>
</div>

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.