What is the best way to expand a div in a downward direction exclusively?

Question

What is the best way to expand a div in a downward direction exclusively?

My task involves a parent div containing a centered child div. My goal is to have the child div grow downwards only upon clicking it, not in both directions.

Initial state of the two divs:

https://i.sstatic.net/cWYyV.png

Outcome after clicking on div 2:

https://i.sstatic.net/QGSDJ.png

Desired result after clicking on div 2:

https://i.sstatic.net/iossE.png

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>

javascript html css

Answer 1

Answer №1

One way to achieve this is by utilizing the position absolute property

let containerDiv = document.querySelector("#container-div");
containerDiv.addEventListener("click", event => {
  containerDiv.style.height = "300px";
})

#main-div {
position:relative;
  height: 200px;
  width: 200px;
  outline: red solid medium;
  display: flex;
  justify-content: center;
  align-items: center;
}

#sub-div {
    position:absolute;
  top:50px;
  height: 100px;
  width: 100px;
  outline: blue solid medium;
}

<div id="main-div">
  <div id="sub-div"></div>
</div>

Answer 2

One way to achieve this is by utilizing the position absolute property

let containerDiv = document.querySelector("#container-div");
containerDiv.addEventListener("click", event => {
  containerDiv.style.height = "300px";
})

#main-div {
position:relative;
  height: 200px;
  width: 200px;
  outline: red solid medium;
  display: flex;
  justify-content: center;
  align-items: center;
}

#sub-div {
    position:absolute;
  top:50px;
  height: 100px;
  width: 100px;
  outline: blue solid medium;
}

<div id="main-div">
  <div id="sub-div"></div>
</div>

Answer 3

Answer №2

This solution may seem a bit unconventional, but by adding an extra element, you can achieve the desired effect. Keep in mind that this method may not be optimal for responsiveness across different screen sizes.

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>

Answer 4

This solution may seem a bit unconventional, but by adding an extra element, you can achieve the desired effect. Keep in mind that this method may not be optimal for responsiveness across different screen sizes.

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>

Answer 5

Answer №3

const box = document.querySelector("#box");
// Store the initial height of the box
const initialHeight = (box.clientHeight);
box.addEventListener("click", e => {
  // Adjust the position and size of the box
  const transformVal = initialHeight / 2;
  box.style.transform = `translateY(-${transformVal}px)`;
  box.style.top = '50%';
  box.style.height = "300px";
})

#container {
  height: 200px;
  width: 200px;
  outline: red solid medium;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#box {
  height: 100px;
  width: 100px;
  outline: blue solid medium;
  position: absolute;
}

<div id="container">
  <div id="box"></div>
</div>

Answer 6

const box = document.querySelector("#box");
// Store the initial height of the box
const initialHeight = (box.clientHeight);
box.addEventListener("click", e => {
  // Adjust the position and size of the box
  const transformVal = initialHeight / 2;
  box.style.transform = `translateY(-${transformVal}px)`;
  box.style.top = '50%';
  box.style.height = "300px";
})

#container {
  height: 200px;
  width: 200px;
  outline: red solid medium;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#box {
  height: 100px;
  width: 100px;
  outline: blue solid medium;
  position: absolute;
}

<div id="container">
  <div id="box"></div>
</div>

Answer 7

Answer №4

To ensure that div1 grows with div2 and maintains the area around it, you can set the height of div1 to 100% and add padding for spacing.

#div1{
  height: 100%;
  width: 160px;
  padding: 40px;
  outline: red solid medium;
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 8

To ensure that div1 grows with div2 and maintains the area around it, you can set the height of div1 to 100% and add padding for spacing.

#div1{
  height: 100%;
  width: 160px;
  padding: 40px;
  outline: red solid medium;
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 9

Answer №5

Consider experimenting with the transform-origin property, using the value "center top" on both the child element and the container if necessary. Visit this link for additional guidance!

Answer 10

Consider experimenting with the transform-origin property, using the value "center top" on both the child element and the container if necessary. Visit this link for additional guidance!

Answer 11

Answer №6

The issue with using flex is that it automatically centers content, which may not always be desired. For instance, if you want the blue square to remain at the top of the container.

This code snippet eliminates the need for flex by centering the blue element through manual adjustments. It moves the element 50% from the top and side, then shifts it back by half its height/width using a transform property.

Furthermore, the element is set to position absolute to prevent it from affecting the size of its parent when it expands.

A CSS variable is employed to define the initial height, allowing for precise control over the positioning of the element.

let div2 = document.querySelector("#div2");
div2.addEventListener("click", e => {
  div2.style.height = "300px";
})

#div1 {
  height: 200px;
  width: 200px;
  outline: red solid medium;
  position: relative;
  --h: 100px;
  --w: 100px;
}

#div2 {
  height: var(--h);
  width: var(--w);
  outline: blue solid medium;
  top: calc((100% - var(--h)) / 2);
  left: calc((100% - var(--w)) / 2);
  position: absolute;
}

<div id="div1">
  <div id="div2"></div>
</div>

Answer 12

The issue with using flex is that it automatically centers content, which may not always be desired. For instance, if you want the blue square to remain at the top of the container.

This code snippet eliminates the need for flex by centering the blue element through manual adjustments. It moves the element 50% from the top and side, then shifts it back by half its height/width using a transform property.

Furthermore, the element is set to position absolute to prevent it from affecting the size of its parent when it expands.

A CSS variable is employed to define the initial height, allowing for precise control over the positioning of the element.

let div2 = document.querySelector("#div2");
div2.addEventListener("click", e => {
  div2.style.height = "300px";
})

#div1 {
  height: 200px;
  width: 200px;
  outline: red solid medium;
  position: relative;
  --h: 100px;
  --w: 100px;
}

#div2 {
  height: var(--h);
  width: var(--w);
  outline: blue solid medium;
  top: calc((100% - var(--h)) / 2);
  left: calc((100% - var(--w)) / 2);
  position: absolute;
}

<div id="div1">
  <div id="div2"></div>
</div>

What is the best way to expand a div in a downward direction exclusively?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What steps do I need to take in order to create a histogram with perfect symmetry?

Using gradients in the app bar with ReactJS and Material UI is not currently supported

Achieving cell merging in react-table can be accomplished by utilizing the appropriate

What is the best way to save high-resolution images created with HTML5 canvas?

Customize the toggle icon for the accordion in Framework7

Struggle with Firefox: Table-cell with Relative Positioning Not Acting as Parent

Javascript provides the ability to return a JSON object containing a specific function name

Expanding the clickable area of a link using the CSS :before pseudo-element selector

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

Using SQL to Insert Values into Select/Option

The integration of AngularJS with a redirect feature is causing issues with sending JSON data to the database

Steps for implementing a conditional rendering in your codeHere is a

Exploring various templates with AngularJS Directives

Trouble with component not refreshing upon store modification in Vuex

Unable to retrieve private field using a public getter method through a proxy

JavaScript - Unable to Modify Select Value with Event Listener

To what extent can the Vuetify data tables be customized?

Should I utilize Next.js API route or communicate directly with Firestore from the client side?

Exploring Array Iteration: Navigating through Arrays with the .map Method in React and Vue

Getting rid of a texture in three.js