調整動態高度div div內的分區

嗨我有一個主要的div，承載2個其他divs。較低的一個是根據主尺寸的大小調整高度。調整動態高度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>

出於某種原因，這是行不通的。我想獲得較低的div id（lower）到函數並獲得父div div id（maindiv）及其高度。與此我想設置較低的div的高度。

任何想法？

感謝您的幫助。

TheVagabond

來源

2016-12-16 Thevagabond

。您調查只使用CSS媒體查詢來實現這個結果？ – 2016-12-16 13:50:51

不，我只有上面的。但那對我有什麼幫助？ – Thevagabond

您想讓我用媒體查詢替代嗎？ – 2016-12-16 13:55:48

來處理屏幕尺寸的變化的一個好方法是在你的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; 
}

現在，媒體查詢，我們可以進行一些更改造型在屏幕尺寸上的放款：

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

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

在這個例子中，我們說什麼時候屏幕尺寸是400px ch將父母的身高提高到100％，並且讓孩子分別獲得50％的分數。

通過這樣做，每當屏幕尺寸減小時，動態顯示的div也會減少。

來源

2016-12-16 14:11:40

我得看看這個。謝謝。 – Thevagabond

這是創建動態網頁的更有效方式。如果你需要進一步的幫助，我會很樂意協助:) – 2016-12-16 14:25:10

當使用你的例子時，我得到了開始的div，但他們在調整大小時保持300px。 [鏈接]（https://jsfiddle.net/jexp4dyh/3/） – Thevagabond

<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。酒吧我會研究媒體查詢，但是我沒有起始高度，因此我不得不使用它。不過謝謝你提到媒體查詢，但還沒有聽說過。

來源

2016-12-16 14:28:31 Thevagabond

您需要獲得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>

來源

2016-12-16 14:31:35 Banzay

調整動態高度div div內的分區

回答

相關問題