0
281
Views¿Cómo puedo hacer que un div crezca solo hacia abajo?
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>
·
Juan Pablo Isaza
3 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
0
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>
·
Juan Pablo Isaza
Report
0
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>
·
Juan Pablo Isaza
Report
Answer question