Adjust the size of a nested div with varying height

Question

Adjust the size of a nested div with varying height

Hey there! I'm facing an issue with a main div that contains 2 other divs. I need the height of the lower div to change dynamically based on the resize of the main div.

Here's the code I have so far:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <style type="text/css">
        #upper{
            background:#F00;
            border: black solid 2px;
            overflow-y:scroll;
            height: 50px;
        }
         #lower{
            background:#AAF;
            border: red solid 2px;
            overflow-y:scroll;
        }
        #maindiv{
            height: 100%;
            border: green solid 2px
        }
        html,body{margin: 0px;}
    </style>
</head>
<body id="bodyId" > 
<div id="maindiv">

    <div id="upper">test<br/>
    test<br/>
    test<br/>
    test<br/>
    test<br/>
    v
    test<br/>
    test<br/></div>

    <div id="lower" onresize="resize('lower')">test2</div>
</div>
    <script type="text/javascript">
        function resize(arg)
        {
            var frame= document.getElementById(arg);
            var heights= document.getElementById(arg).parentNode.offsetHeight ;
            alert(frame);
            frame.style.height = heights -50 + "px";


        }



    </script> 
</body>
</html>

I'm having trouble getting it to work. My goal is to pass the id of the lower div (lower) to a function, retrieve the id and height of the parent div (maindiv), and set the height of the lower div accordingly.

Any insights or suggestions would be greatly appreciated!

Thanks in advance for your assistance.

Sincerely, TheVagabond

javascript html css function resize

Answer 1

Answer №1

If you want to ensure your website looks great on all screen sizes, using media queries in your CSS is a smart approach.

For beginners, a helpful resource to learn about media queries is W3 schools.

Consider this simple example with a parent div and two child divs:

<div id="parentContainer">
  <div id="d1"> </div>
  <div id="d2"></div>
</div>

You can style these elements as follows:

#parentContainer {
  border:1px solid red; 
  height:100%; 
  width:300px; 
}

#d1, #d2 {
  width:300px; 
  height:300px; 
}

#d1 {
  background-color:green; 
}

#d2 {
  background-color:orange;
}

Now, by using media queries, you can customize the styling based on screen size changes:

@media screen and (max-width:400px) {
  #parentContainer {
    height:100%; 
  }

  #d1, #d2 {
    height:50%; 
  }
}

This code snippet adjusts the heights of the divs when the screen width is 400px or less. This creates a dynamic and responsive layout for your website.

By implementing media queries effectively, your design will adapt smoothly to various screen sizes.

Answer 2

If you want to ensure your website looks great on all screen sizes, using media queries in your CSS is a smart approach.

For beginners, a helpful resource to learn about media queries is W3 schools.

Consider this simple example with a parent div and two child divs:

<div id="parentContainer">
  <div id="d1"> </div>
  <div id="d2"></div>
</div>

You can style these elements as follows:

#parentContainer {
  border:1px solid red; 
  height:100%; 
  width:300px; 
}

#d1, #d2 {
  width:300px; 
  height:300px; 
}

#d1 {
  background-color:green; 
}

#d2 {
  background-color:orange;
}

Now, by using media queries, you can customize the styling based on screen size changes:

@media screen and (max-width:400px) {
  #parentContainer {
    height:100%; 
  }

  #d1, #d2 {
    height:50%; 
  }
}

This code snippet adjusts the heights of the divs when the screen width is 400px or less. This creates a dynamic and responsive layout for your website.

By implementing media queries effectively, your design will adapt smoothly to various screen sizes.

Answer 3

Answer №2

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <style type="text/css">
        #upper{
            background:#F00;
            border: black solid 2px;
            overflow-y:scroll;
            height: 50px;
        }
         #lower{
            background:#AAF;
            border: red solid 2px;
            overflow-y:scroll;
        }
        #maindiv{
            height: 100%;
            border: green solid 2px
        }
        html,body{margin: 0px;}
    </style>
</head>
<body id="bodyId" onresize="resize('lower')"> 
<div id="maindiv">

    <div id="upper">test<br/>
    test<br/>
    test<br/>
    test<br/>
    test<br/>
    v
    test<br/>
    test<br/></div>

    <div id="lower">test2</div>
</div>
    <script type="text/javascript">
        function resize(arg)
        {
            var frame= document.getElementById(arg);
            var heights= frame.parentNode.offsetHeight;
            frame.style.height = heights -70 + "px";


        }



    </script> 
</body>
</html>

@Lena correctly identified the issue with the body, but the script needed some corrections. Thanks for pointing that out.

@F. Bar, I will explore using media queries for this, although determining the starting height for the lower div might be a challenge. Still, appreciate the suggestion to consider media queries, it's a new concept for me.

Answer 4

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <style type="text/css">
        #upper{
            background:#F00;
            border: black solid 2px;
            overflow-y:scroll;
            height: 50px;
        }
         #lower{
            background:#AAF;
            border: red solid 2px;
            overflow-y:scroll;
        }
        #maindiv{
            height: 100%;
            border: green solid 2px
        }
        html,body{margin: 0px;}
    </style>
</head>
<body id="bodyId" onresize="resize('lower')"> 
<div id="maindiv">

    <div id="upper">test<br/>
    test<br/>
    test<br/>
    test<br/>
    test<br/>
    v
    test<br/>
    test<br/></div>

    <div id="lower">test2</div>
</div>
    <script type="text/javascript">
        function resize(arg)
        {
            var frame= document.getElementById(arg);
            var heights= frame.parentNode.offsetHeight;
            frame.style.height = heights -70 + "px";


        }



    </script> 
</body>
</html>

@Lena correctly identified the issue with the body, but the script needed some corrections. Thanks for pointing that out.

@F. Bar, I will explore using media queries for this, although determining the starting height for the lower div might be a challenge. Still, appreciate the suggestion to consider media queries, it's a new concept for me.

Answer 5

Answer №3

Ensure to retrieve the parentElement rather than the parentNode. Below is a code snippet including a button for resizing testing purposes. You can invoke a function whenever the height of the upper div changes on an event.

function adjustSize(arg)
{
  var frame= document.getElementById(arg);
  var heights= document.getElementById(arg).parentElement.clientHeight;
  frame.style.height = heights -50 + "px";
}

#upper{
  background:#cca;
  border: black solid 2px;
  overflow-y:scroll;
  height: 50px;
  box-sizing: border-box;
}
#lower{
  background:#9c9;
  border: red solid 2px;
  overflow-y:scroll;
  box-sizing: border-box;
}
#maindiv{
  display: block;
  height: 100%;
  border: green solid 2px;
  box-sizing: border-box;
}
html, body
{
    height: 100%;
    width: 100%;
    margin: 0px;
    
}

<div id="maindiv">

    <div id="upper">test<br/>
    test<br/>
    test<br/>
    test<br/>
    test<br/>
    v
    test<br/>
    test<br/></div>

    <div id="lower">test2</div>
    <button onclick="adjustSize('lower')">resize</button>
</div>

Answer 6

Ensure to retrieve the parentElement rather than the parentNode. Below is a code snippet including a button for resizing testing purposes. You can invoke a function whenever the height of the upper div changes on an event.

function adjustSize(arg)
{
  var frame= document.getElementById(arg);
  var heights= document.getElementById(arg).parentElement.clientHeight;
  frame.style.height = heights -50 + "px";
}

#upper{
  background:#cca;
  border: black solid 2px;
  overflow-y:scroll;
  height: 50px;
  box-sizing: border-box;
}
#lower{
  background:#9c9;
  border: red solid 2px;
  overflow-y:scroll;
  box-sizing: border-box;
}
#maindiv{
  display: block;
  height: 100%;
  border: green solid 2px;
  box-sizing: border-box;
}
html, body
{
    height: 100%;
    width: 100%;
    margin: 0px;
    
}

<div id="maindiv">

    <div id="upper">test<br/>
    test<br/>
    test<br/>
    test<br/>
    test<br/>
    v
    test<br/>
    test<br/></div>

    <div id="lower">test2</div>
    <button onclick="adjustSize('lower')">resize</button>
</div>

Adjust the size of a nested div with varying height

Answer №1

Answer №2

Answer №3

Similar questions

Aligning the stars with CSS

What is the best way to transfer an integer from my main application to a separate JavaScript file?

What causes <input> elements to vertically center when using the same technique for centering <span> elements? (The line-height of <input> does not match its parent's height)

Unable to activate animation within a nested ngRepeat loop

Netlify deployment is failing to display the CSS styling on a website built with Hugo

The div is empty when trying to display Google Maps

Ways to align text and horizontal rule perfectly within a div container?

How can I locate an element within the body of an if statement?

Implementing dynamic styling with Alpine JS when hovering

Ways to implement a conditional statement to display a div using JavaScript

What is the method to alter the color of an SVG source within an image tag?

Display a portion of the existing URL as a clickable link on the webpage using JavaScript or PHP

Numerous Controllers in AngularApp failing to function properly

Filter a data array using a two-dimensional filter array that may change dynamically

The art of uploading images with HTML and CSS

I designed my radio buttons to ensure they cannot be selected multiple times

Two objects precisely located in the same spot yet not visible simultaneously

Why is async await giving back a promise object instead of my intended value?

Troubleshooting issue with Django development server causing HTML5 video element to become non-seekable

Is there a way to deliberately trigger an error using Selenium WebDriverIO?