Tengo un div principal que tiene un div secundario centrado dentro. Lo que quiero es que cuando haga clic en el div secundario, crezca solo hacia abajo, no hacia arriba y hacia abajo.
Los dos divs antes de hacer clic:
El resultado que obtengo cuando hago clic en div 2:
El resultado que busco cuando hago clic en div 2:
let div2 = document.querySelector("#div2"); div2.addEventListener("click", e => { div2.style.height = "300px"; })
#div1 { height: 200px; width: 200px; outline: red solid medium; display: flex; justify-content: center; align-items: center; } #div2 { height: 100px; width: 100px; outline: blue solid medium; }
<div id="div1"> <div id="div2"></div> </div>
Puedes hacerlo configurando la posición absoluta
let div2 = document.querySelector("#div2"); div2.addEventListener("click", e => { div2.style.height = "300px"; })
#div1 { position:relative; height: 200px; width: 200px; outline: red solid medium; display: flex; justify-content: center; align-items: center; } #div2 { position:absolute; top:50px; height: 100px; width: 100px; outline: blue solid medium; }
<div id="div1"> <div id="div2"></div> </div>
let div2 = document.querySelector("#div2"); // Keep the initial height of div2 const initialHeight = (div2.clientHeight); div2.addEventListener("click", e => { // Add top and transform property const transformVal = initialHeight / 2; div2.style.transform = `translateY(-${transformVal}px)`; div2.style.top = '50%'; div2.style.height = "300px"; })
#div1 { height: 200px; width: 200px; outline: red solid medium; display: flex; justify-content: center; align-items: center; position: relative; } #div2 { height: 100px; width: 100px; outline: blue solid medium; position: absolute; }
<div id="div1"> <div id="div2"></div> </div>
Un poco raro, pero usando un elemento extra esto funciona. Sin embargo, definitivamente no responde a varios tamaños.
let div2 = document.querySelector("#div2"); div2.addEventListener("click", e => { div2.style.height = "300px"; })
#div1 { height: 200px; width: 200px; outline: red solid medium; display: flex; justify-content: center; align-items: center; } #divc { height: 100px; width: 100px; } #div2 { height: 100px; width: 100px; outline: blue solid medium; }
<div id="div1"> <div id="divc"><div id="div2"></div></div> </div>