• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

189
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:

ingrese la descripción de la imagen aquí

El resultado que obtengo cuando hago clic en div 2:

ingrese la descripción de la imagen aquí

El resultado que busco cuando hago clic en div 2:

ingrese la descripción de la imagen aquí

 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>

almost 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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>

almost 3 years ago · 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>

almost 3 years ago · 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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error