What is the best way to control the distance of a div from the top, rather than the

Question

What is the best way to control the distance of a div from the top, rather than the

I'm currently trying to increase the height of a div on button click. However, I am encountering an issue where the div is expanding from the bottom (default behavior). What I actually want is for the div to expand from the top while keeping its content intact.

In my scenario, I have two colored divs - yellow and white. When the button is clicked, I want the height of the white box to increase from the top rather than the bottom.

Check out the code here:

https://codesandbox.io/s/still-lake-lw07u?file=/index.html

<body>
    <div class="parent">
        <div class="abc">
            <div class="img"></div>
            <div class="content"></div>
        </div>
    </div>

    <button onclick="abc()">click</button>
    <script>
        function abc() {
            document.querySelector(".content").style.height = "300px";
        }
    </script>
</body>

javascript html css

Answer 1

Answer №1

Not completely certain about the ultimate design, but here's a suggested approach:

      function xyz() {
        const ele = document.querySelector(".content");
        ele.style.height = "300px";
        ele.style.position = 'absolute';
        ele.style.bottom = '0px';
      }

Answer 2

Not completely certain about the ultimate design, but here's a suggested approach:

      function xyz() {
        const ele = document.querySelector(".content");
        ele.style.height = "300px";
        ele.style.position = 'absolute';
        ele.style.bottom = '0px';
      }

Answer 3

Answer №2

You have the option to utilize transform: scaleY(val) along with transform-origin: bottom to adjust the size and positioning of your element.

 .abc {
        width: 80%;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(10, [col-start] 1fr);
        grid-template-rows: repeat(8, [row-start] 1fr);
        padding-top: 3.4em;
        padding-bottom: 3.4em;
      }
      .img {
        grid-column: col-start / span 8;
        grid-row: row-start / span 6;
        background-size: cover;
        max-width: 1074px;
        max-height: 200px;
        background-color: #ee0;
      }
      .content {
        grid-column: col-start 6 / span 6;
        grid-row: row-start 2 / span 6;
        background: #fff;
        min-height: 100px;
        border: 1px solid blue;
        padding: 3em;
      }
      
      .bigger {
      transform: scaleY(2);
      transform-origin:bottom;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
     
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="abc">
        <div class="img"></div>
        <div class="content"></div>
      </div>
    </div>

    <button onclick="abc()">click</button>
    <script>
      function abc() {
        document.querySelector(".content").classList.add('bigger');
      }
    </script>
  </body>
</html>

Answer 4

You have the option to utilize transform: scaleY(val) along with transform-origin: bottom to adjust the size and positioning of your element.

 .abc {
        width: 80%;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(10, [col-start] 1fr);
        grid-template-rows: repeat(8, [row-start] 1fr);
        padding-top: 3.4em;
        padding-bottom: 3.4em;
      }
      .img {
        grid-column: col-start / span 8;
        grid-row: row-start / span 6;
        background-size: cover;
        max-width: 1074px;
        max-height: 200px;
        background-color: #ee0;
      }
      .content {
        grid-column: col-start 6 / span 6;
        grid-row: row-start 2 / span 6;
        background: #fff;
        min-height: 100px;
        border: 1px solid blue;
        padding: 3em;
      }
      
      .bigger {
      transform: scaleY(2);
      transform-origin:bottom;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
     
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="abc">
        <div class="img"></div>
        <div class="content"></div>
      </div>
    </div>

    <button onclick="abc()">click</button>
    <script>
      function abc() {
        document.querySelector(".content").classList.add('bigger');
      }
    </script>
  </body>
</html>

Answer 5

Answer №3

A different perspective:

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>

<title> Sample Webpage </title>
<!-- link rel="stylesheet" href="styles.css" media="screen" -->
<!-- Source: https://example.com/sample-question/12345/how-to-create-a-div-element/67890#67890 -->
<style>
 .container { background-color: purple; width: 15em; }
 .star { height: 200px; }
</style>

</head><body>
   <div class="wrapper">
      <div class="xyz">
        <div class="pic">Picture</div>
        <div class="container">Sample</div>
      </div>
    </div>
    <button onclick="xyz()">click me</button>

<script>
  function xyz() {
    const element = document.querySelector(".container");

    var newDiv = document.createElement('div');
//    div.innerHTML = '*';
    newDiv.className = 'star';

    element.parentNode.insertBefore(newDiv, element);
  }
</script>
</body></html>

Answer 6

A different perspective:

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>

<title> Sample Webpage </title>
<!-- link rel="stylesheet" href="styles.css" media="screen" -->
<!-- Source: https://example.com/sample-question/12345/how-to-create-a-div-element/67890#67890 -->
<style>
 .container { background-color: purple; width: 15em; }
 .star { height: 200px; }
</style>

</head><body>
   <div class="wrapper">
      <div class="xyz">
        <div class="pic">Picture</div>
        <div class="container">Sample</div>
      </div>
    </div>
    <button onclick="xyz()">click me</button>

<script>
  function xyz() {
    const element = document.querySelector(".container");

    var newDiv = document.createElement('div');
//    div.innerHTML = '*';
    newDiv.className = 'star';

    element.parentNode.insertBefore(newDiv, element);
  }
</script>
</body></html>

What is the best way to control the distance of a div from the top, rather than the

Answer №1

Answer №2

Answer №3

Similar questions

Ensuring Safe Data Storage for an Angular 2 Project with Local Storage

Ways to incorporate debounce time into an input search field in typescript

Sliding to alter the vertex coordinates

"Troubleshooting: Why isn't the AJAX Live Search displaying any

Converting a time string into a date object using JavaScript and AngularJS

Achieving nested routes without the need for nested templates

Verify that the JSON data contains the desired data type before adding it to jQuery

The div elements are not nested correctly as they should be

Creating a clickable map for a PNG image: Step-by-step tutorial

What is the best way to ensure an observable has been updated before proceeding with additional code execution?

Invoking a SOAP service method defined by a message contract in soap.js

Increasing the size of elements with jQuery animate method

Missing data: Node JS fails to recognize req.body

Using JavaScript, aim for a specific element by its anchor headline

What is the best way to design a Bootstrap grid layout that includes a responsive left column with a minimum width and a scrollable right column?

Automatic File refresh in Javascript without page reload

Error: The value of data.isbn is not defined

How to align several DIVs within a container with an unspecified size

localStorage access denied in IE11 on desktop mode, but not in metro mode

Why is Socket.io functioning on localhost but fails to work once deployed to Heroku?