div内のdivを動的高さで調整する

こんにちは私は、他の2つのdivをホストするmain divを持っています。下のものは、メインのdivサイズのサイズ変更に応じて高さを変更することです。それは動作しません何らかの理由で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（下位）を取得し、親div id（maindiv）とその高さを取得したいと思います。これで、下位のdivの高さを設定したいと思います。

アイデア？

ありがとうございました。

TheVagabond

出典

2016-12-16 Thevagabond

あなたはこの結果を達成するためにCSSメディアクエリを使用してに見たことがありますか？ –

いいえ、私は上記を持っています。しかし、それが私を助けてくれるだろうか？ – Thevagabond

私はメディアの代わりに答えてほしいですか？ –

画面サイズの変更を処理するための良い方法は、あなたのCSSのメディアクエリを使用しています。

W3の学校はstartに適しています。我々はにいくつかの変更を加えることができ、メディアクエリで、今

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

：

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

は、我々が使用して、上記のスタイルができます。

簡単な例では、親のdivおよび2子を取りますスクリーンサイジングでスタイリングを行う：

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

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

この例では、画面サイズが400px ch親の高さを100％に設定し、子divを両方とも50％にします。

このようにすることで、画面サイズが小さくなるたびにdivを動的に変更できます。

出典

2016-12-16 14:11:40

私はこれを調べなければなりません。ありがとう。 – Thevagabond

これは、動的なWebページを作成するより効率的な方法です。さらなる助けが必要な場合は、私が助けてくれることを嬉しく思っています:) –

あなたの例を使用するとき、私は開始divを取得しますが、サイズ変更時には300pxのままです。 [link]（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。バー私はメディアのクエリを調べますが、私はそれを再生する必要があるので、低いdivの開始高さはありません。おかげさまで、メディア・クエリーについては全く指摘していますが、それについてはまだ聞いていません。

出典

2016-12-16 14:28:31 Thevagabond

parentNodeの代わりにparentElementを取得する必要があります。テストリサイズ用のボタン付きスニペットです。上位の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を動的高さで調整する

答えて

関連する問題