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（较低）到函数并获得父divs id（maindiv）及其高度。有了这个我想设置下div的高度。

有什么想法吗？

感谢您的帮助。

TheVagabond

Answer 1

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

W3学校是start的好地方。

一个简单的例子，取父div和2子：

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

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

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

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

在这个例子中，我们说当屏幕尺寸为400px时，将父节点的高度更改为100％并使子节点各占50％。

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

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

3 个答案: