javascript - 在一个div中加载的网页不可见,并且无法看到另一个div的滚动条的末尾

标签 javascript jquery html css

在粘贴的 fiddle 链接中,我在 html 部分有 3 个 div 标签。一个 div 包含标题部分。第二个 div 呈现树结构,第三个 div 加载网页。在 fiddle 代码的结果中,第一个 div 带有标题部分。第二个 div 也有预期的树结构,但看不到滚动条的末尾。应该显示 html 页面的第三个 div 没有显示。 https://jsfiddle.net/msridhar/qfq5su63/18/ 整个代码的目的是在一页中显示 3 个 div,并且每个 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 文件:

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

Javascript 文件:

    $('.results1').jqxTree({       
   width: '250px',
   theme: 'energyblue'
    });                         
   $(".results2").load("https://fiddle.jshell.net/t5L1tywu/1/show/",function(){

}); 

最佳答案

尝试改变 results1 的风格

width:250px;height:100%;border:1px solid #ff8000;margin-left:0;margin-top:130px;overflow:scroll; float: left;

和 results2 与

height:100%;margin-left:280px;margin-top:130px;overflow:scroll;

通过这种方式,您可以在 fiddle 中看到所有三个 div。 我没有解决滚动问题的方法。

关于javascript - 在一个div中加载的网页不可见,并且无法看到另一个div的滚动条的末尾,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37839077/

相关文章:

javascript - 如何更改图像的src

javascript - 仅当先前的可观察对象返回特定值时如何执行回调

javascript - 将外部 js 注入(inject)自己创建的 iframe

jquery - 从某些按钮/输入中排除 jquery ui 样式

html - 如何使鼠标悬停在菜单上时出现描述?

javascript - 如何在 jQuery 集合中获取被点击的项目索引?不是通过索引()

javascript - anchor 标签内的 Font Awesome 图标不可点击。有没有办法做到这一点?

javascript - VueJS如何用emit代替dispatch

javascript - $(window).resize 和 $("#foo").scroll 上的触发函数

javascript - 调整 <ul> 的宽度以容纳菜单项