为什么不dispay滚动条在儿童的div

问题描述：

<body> 
 
\t <div id="parentid" style="position:absolute;width:20%;height:100%;"> 
 
\t \t <div id="inputdiv"> 
 
\t \t \t <span >hight:</span> 
 
\t \t \t <input type="text" id="highlightinput"> 
 
\t \t </div> 
 
\t \t <div id="pollutanttree" style="height:2000px;overflow:auto;"> 
 
\t \t \t test data; 
 
\t \t </div> 
 
\t </div> 
 
\t <div style="position:absolute;left:20%;top:0px;height:100%;width:80%"> 
 
      right data; 
 
\t </div> 
 
</body>

我想在显示页面的右侧pollutanttree div'right.but双击自动滚屏条显示滚动条。

如果我将“overflow：auto”从污染源div样式移动到parentid div样式，这几乎是正确的：但我不希望输入div卷动在一起。

我该如何解决？

请注明你想要什么。你的解释很不清楚。 – Swapna

答

<div id="parentid" style="position:absolute;width:20%;height:100%;"> 
    <div style="height: 32px;line-height: 32px;"> 
     <span >hight:</span> 
     <input type="text" id="highlightinput"> 
    </div> 
    <div id="pollutanttree" style="position: absolute;top: 32px;left: 0;right: 0;bottom: 0;overflow:auto;"> 
     <div style="height: 2000px;"> 
      test data; 
     </div> 
    </div> 
</div>

errrrr，这是你想要的吗？

答

试试这个：希望它的工作

<div id="parentid" style="position:absolute;width:20%;height:100%;"> 
 
    <div style="height: 32px;line-height: 32px;"> 
 
     <span >hight:</span> 
 
     <input type="text" id="highlightinput"> 
 
    </div> 
 
    <div id="pollutanttree" style="position: absolute;top: 32px;left: 0;right: 0;bottom: 0;overflow:auto;"> 
 
     <div style="height: 2000px;"> 
 
      test data; 
 
     </div> 
 
    </div> 
 
</div>

thanks.can我不依赖于固定的高度和顶部位置？因为div的输入类会改变：btn-group-lg/btn-group-sm，等等...... – fe263

没有不幸，我想不是 –

答

目前，你给2000像素高度#pollutanttree这使得滚动条对人体具有它在做什么。你必须降低#pollutanttree的高度，并在这之间推进数据。见下面的代码。

<body> 
    <div id="parentid" style="position:absolute;width:20%;height:100%;"> 
     <div> 
      <span>hight:</span> 
      <input type="text" id="highlightinput"> 
     </div> 
     <div id="pollutanttree" style="height:200px;overflow:auto;"> 
      test data test datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest datatest data; 
     </div> 
    </div> 
    <div style="position:absolute;left:20%;top:0px;height:100%;width:80%"> 
      right data; 
    </div> 
<div class="as-console-wrapper"><div class="as-console"></div></div> 
</body>

答

<body> 
 

 
\t <div id="parentid" style="position:absolute;width:20%;height:100%;"> 
 
\t \t <div id="inputdiv"> 
 
\t \t \t <span >hight:</span> 
 
\t \t \t <input type="text" id="highlightinput"> 
 
\t \t </div> 
 
\t \t <div id="pollutanttree" style="height:2000px;overflow:auto;"> 
 
\t \t \t test data; 
 
\t \t </div> 
 
\t </div> 
 
\t <div style="position:absolute;left:20%;top:0px;height:100%;width:80%"> 
 

 
      right data; 
 

 
\t </div> 
 

 

 
</body>

答

试试这个代码笔.. 你的答案codepen

其实你给height: 2000px和overflow: auto，但没有那么多的内容在该元素，基本上，当卷轴到来时意味着超过你的身高。希望你能理解。

答

这样的事情？

<body> 
 

 
\t <div id="parentid" style="position:absolute;width:20%;height:100%;"> 
 
\t \t <div id="inputdiv"> 
 
\t \t \t <span >hight:</span> 
 
\t \t \t <input type="text" id="highlightinput"> 
 
\t \t </div> 
 
\t \t <div id="pollutanttree" style="height:2000px;overflow-y:scroll;"> 
 
\t \t \t test data; 
 
\t \t </div> 
 
\t </div> 
 
\t <div style="position:absolute;left:20%;top:0px;height:100%;width:80%"> 
 

 
      right data; 
 

 
\t </div> 
 

 

 
</body>

为什么不dispay滚动条在儿童的div

相关推荐