Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to set height equal to the dynamic width (CSS fluid layout) in JavaScript?

Javascript Object Oriented Programming Front End Technology

To set height equal to the dynamic width in JavaScript, you can calculate the element's width and apply it as the height. This creates a perfect square that maintains its aspect ratio as the parent container resizes.

Using jQuery

jQuery provides a simple way to get and set element dimensions:

<!DOCTYPE html>
<html>
   <head>
      <style>
         .wrap {
            width: 400px;
            height: 300px;
            border: 2px solid yellow;
            padding: 10px;
         }
         .myChild {
            width: 80%;
            border: 1px solid red;
            background-color: lightblue;
         }
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <div class="wrap">
         <div class="myChild"></div>
      </div>

      <script>
         $(document).ready(function() {
            var childWidth = $('.myChild').width();
            $('.myChild').css({
               'height': childWidth + 'px'
            });
            
            console.log('Width: ' + childWidth + 'px');
            console.log('Height set to: ' + childWidth + 'px');
         });
      </script>
   </body>
</html>

Using Vanilla JavaScript

You can achieve the same result without jQuery using native JavaScript methods:

<!DOCTYPE html>
<html>
   <head>
      <style>
         .wrap {
            width: 500px;
            height: 400px;
            border: 2px solid blue;
            padding: 15px;
         }
         .myChild {
            width: 60%;
            border: 1px solid green;
            background-color: lightyellow;
         }
      </style>
   </head>
   <body>
      <div class="wrap">
         <div class="myChild" id="dynamicBox"></div>
      </div>

      <script>
         window.onload = function() {
            const element = document.getElementById('dynamicBox');
            const elementWidth = element.offsetWidth;
            
            element.style.height = elementWidth + 'px';
            
            console.log('Element width: ' + elementWidth + 'px');
            console.log('Height set to: ' + elementWidth + 'px');
         };
      </script>
   </body>
</html>

Responsive Version with Window Resize

For truly dynamic behavior that updates on window resize:

<!DOCTYPE html>
<html>
   <head>
      <style>
         .wrap {
            width: 70%;
            max-width: 600px;
            border: 2px solid purple;
            padding: 20px;
            margin: 20px auto;
         }
         .myChild {
            width: 100%;
            border: 2px solid orange;
            background-color: lightcoral;
         }
      </style>
   </head>
   <body>
      <div class="wrap">
         <div class="myChild" id="responsiveBox"></div>
      </div>

      <script>
         function setSquareDimensions() {
            const element = document.getElementById('responsiveBox');
            const elementWidth = element.offsetWidth;
            element.style.height = elementWidth + 'px';
            
            console.log('Updated - Width: ' + elementWidth + 'px, Height: ' + elementWidth + 'px');
         }

         // Set initial dimensions
         window.onload = setSquareDimensions;
         
         // Update on window resize
         window.onresize = setSquareDimensions;
      </script>
   </body>
</html>

Key Points

  • jQuery method: Use $('.element').width() to get width and .css() to set height
  • Vanilla JS: Use offsetWidth property to get the element's actual width including padding and border
  • Timing: Execute after DOM is loaded using $(document).ready() or window.onload
  • Responsive: Add window resize listener for dynamic updates

Conclusion

Setting height equal to dynamic width creates perfect squares that adapt to container changes. Use jQuery for simplicity or vanilla JavaScript for better performance without external dependencies.

Updated on: 2026-03-15T23:18:59+05:30

720 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements