使用动态高度在 div 范围内调整 Div 大小

Question

您好，我有一个主 div，它承载另外 2 个 div。下一个是根据主要div大小的调整大小来改变高度。

这是我得到的代码：

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

出于某种原因，它不起作用。我想获取函数的较低 divs id (lower) 并获取父 divs id (maindiv) 及其高度。我想设置较低的 div.

的高度

有什么想法吗？

感谢您的帮助。

流浪汉

Answer 1

处理屏幕尺寸变化的一个好方法是在 css 中使用媒体查询。

W3学校是start的好去处。

一个简单的例子，以 parent div 和 2 child 为例：

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

我们可以使用以下样式设置上面的样式：

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

#d1 {
  width:300px; 
  height:300px; 
  background-color:green; 
}

#d2 {
  width:300px; 
  height:300px; 
  background-color:orange;
}

现在，通过媒体查询，我们可以根据屏幕大小对样式进行一些更改：

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

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

在这个例子中，我们说当屏幕尺寸为 400px 时，将 parent 的高度更改为 100%，并使 child div 各为 50%。

通过这样做，每次屏幕尺寸减小时，divs 也会动态地减小。

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>

@Raj 对正文是正确的，我只是在脚本部分中有一些错误的地址。

@F。 Bar 我会查看媒体查询，但是我没有较低 div 的起始高度，所以我必须使用它。不过，谢谢指出媒体查询，还没有听说过。

Answer 3

您需要 parentElement 而不是 parentNode。这是一个带有用于测试调整大小的按钮的片段。当上 div 高度发生变化时，您可以每次在事件上调用一个函数。

function resize(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="resize('lower')">resize</button>
</div>

使用动态高度在 div 范围内调整 Div 大小

Resize Div within div with dynamic height

html

javascript

css

resize

function