0
貼り付けられたフィドルリンクでは、HTMLセクションに3つのdivタグがあります。 1つのdivはヘッダー部分を構成します。 2番目のdivはツリー構造を、3番目のdivはWebページをロードします。フィドルコードの結果では、1番目のdivにヘッダ部分があります。 2番目のdivも予想されるツリー構造ではありますが、スクロールバーの終わりを見ることはできませんでした。 HTMLページを表示する必要がある3番目のdivは表示されません。 https://jsfiddle.net/msridhar/qfq5su63/18/ このコード全体の目的は、1つのページに3つのdivを表示することです。オーバーフローの場合は、それぞれをスクロール可能にする必要があります。私は与えられたデフォルトのスクロールバーを望んでいません。この問題で私を助けてください。divに表示されたWebページが表示されず、別のdivのスクロールバーの末尾が表示されない
HTMLファイル：
<body class="disableScroll" style="height: 100%;">
<div id="headerDiv">
<img id="headerImg" src="./assets/Logo.png" width="280" height="125" alt="Logo"/>
<pre id="headerPre">
Test Series
Cloud Solutions
</pre>
<hr id="headerHR">
</div>
<div class="results1" style="width:250px; height:100%; border:1px solid #ff8000; margin-left:0; margin-top:130px;overflow:scroll;">
<ul>
<li item-selected='true'>Home</li>
<li item-expanded='true'>Solutions
<ul>
<li>Education</li>
<li>Financial services</li>
<li>Government</li>
<li>Manufacturing</li>
<li>Solutions
<ul>
<li>Consumer photo and video</li>
<li>Mobile</li>
<li>Rich Internet applications</li>
<li>Technical communication</li>
<li>Training and eLearning</li>
<li>Web conferencing</li>
</ul>
</li>
<li>All industries and solutions</li>
</ul>
</li>
</ul>
</div>
<div class="results2" style="width:100%; height:100%; margin-left:280px;margin-top:130px; overflow:scroll;">
</div>
CSSファイル：
のJavascriptファイルhtml{
height: 100%;
overflow: hidden;
}
.disableScroll{
overflow-x: hidden;
overflow-y: hidden;
}
#headerDiv{
position: fixed;
top: 0;
width: 100vw;
//border-bottom: 3px solid #808080;
}
#headerHR{
width: 100%;
height: 1px;
}
#headerImg{
float: left;
margin-top: 0px;
margin-left: 0px;
}
#headerPre{
float: left;
font-family: "Arial", Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 24px;
}
：
$('.results1').jqxTree({
width: '250px',
theme: 'energyblue'
});
$(".results2").load("https://fiddle.jshell.net/t5L1tywu/1/show/",function(){
});