Question

＆＃13;

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

＆＃13;

我想在污染物树脂div中显示滚动条，然后在页面右侧显示scrool bar。

如果我移动＆＃34;溢出：auto＆＃34;从污染物质的div风格到parentid div风格，它几乎是正确的：但我不想输入div滚动。

我该如何解决？

Answer 1

试试这个：希望它有效

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

Answer 2

试试这个代码笔.. 您的回答codepen

实际上你正在给height: 2000px和overflow: auto，但是在该元素中没有那么多内容，基本上当滚动到达时它意味着超出你的身高。希望你能理解。

Answer 3

<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，这就是你想要的吗？

Answer 4

目前，你给#pollutanttree提供了2000px的高度，这使得身体上的滚动条正如它所做的那样。您必须降低#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>

Answer 5

＆＃13;

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

＆＃13;

Answer 6

这样的东西？

＆＃13;

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

＆＃13;

为什么不在儿童div中显示滚动条

6 个答案: