DIV的横向滚动条挡住最下面的内容怎么解决？

link_1029 2009-09-15 10:46:10

DIV要求横向滚动条自动出现，上下滚动条不出现。
问题是出现横向滚动条后会挡住最下面的内容。这个应该怎么解决呢？
代码如下：



<div style="overflow-x:auto;width:100;" align="center">

    AAAAAAAAAAAAAA

    AAAAAAAAAAAAAA

</div>

...全文

1786 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

link_1029 2009-09-23

打赏
举报

感谢楼上一直以来的帮助。不过还是有点问题。
你的这个方法在确定有滚动条的时候是可以的。
但是一旦没有滚动条的时候就多了一行出来
现在使用在层的onmouseover事件上加了调整层高度的方法来解决这个问题。
要是有能监控层的内容变化或层里面隐藏的对象变化的事件就好了。

hookee 2009-09-18

打赏
举报



<html>

    <head>

<script>

function doClick()

{

   document.getElementById("inner").innerHTML = "CCCCCCCC";

}

</script>

</head>

<body>

<div id="pad" style="overflow-x:auto;width:100;height:expression(this.scrollHeight+21);" align="center">

    AAAAAAAAAAAAAA

    AAAAAAAAAAAAAA

    <div id="inner">

    </div>    

</div>

    <input type="button" onclick="doClick()" value="Click"/>

</body>

</html>

link_1029 2009-09-18

打赏
举报

我想要的效果是层里面的内容变化的时候。滚动条可以自动的往下移，不挡住最下面的内容
上面的方法都需要在触发层内内容变化的事件里加上改变层高度的代码。这个对我有点困难
因为有很多事件可能使层里面的内容发生改变。我不可能在每一个触发事件中加上调整层高度的方法

link_1029 2009-09-18

打赏
举报

Cyril_Tam 2009-09-17

打赏
举报

引用错了，不好意思

[Quote=引用 3 楼 link_1029 的回复:]
引用 1 楼 cyril_tam 的回复:
挡住什么了？

你的意思不会是说挡住第二排的A了吧？？

对。我就是这个意思。
[/Quote]

<div id="pad" style="overflow-x:auto;width:100;" align="center">
AAAAAAAAAAAAAA
AAAAAAAAAAAAAA
</div>
这个显示出来只是一排A噢，并没有换行的，你试下
<div id="pad" style="overflow-x:auto;width:100;" align="center">
AAAAAAAAAAAAAA
BBBBBBBBBBBBBB
</div>
就知道了

Cyril_Tam 2009-09-17

打赏
举报

[Quote=引用 2 楼 hookee 的回复:]
HTML code<script>
window.onload=function(){var div= document.getElementById("pad");
div.style.height= div.scrollHeight+ (div.scrollHeight- div.clientHeight);
div.style.zoom=1
}</script><divid="pad" style="overflow-x:auto;width:100;" align="center">
AAAAAAAAAAAAAA
AAAAAAAAAAAAAA</div>
[/Quote]

<div id="pad" style="overflow-x:auto;width:100;" align="center">
AAAAAAAAAAAAAA
AAAAAAAAAAAAAA
</div>
这个显示出来只是一排A噢，并没有换行的，你试下
<div id="pad" style="overflow-x:auto;width:100;" align="center">
AAAAAAAAAAAAAA
BBBBBBBBBBBBBB
</div>
就知道了

hookee 2009-09-17

打赏
举报



<html>

    <head>

<script>

function adjust(){

   var div = document.getElementById("pad");

   div.style.zoom=1;

   div.style.height = div.scrollHeight + (div.scrollHeight - div.clientHeight);

 }

 window.onload=function(){

 	adjust()

 }

function doClick()

{

   document.getElementById("inner").innerHTML = "CCCCCCCC";

   adjust()

}

</script>

</head>

<body>

<div id="pad" style="overflow-x:auto;width:100;" align="center">

    AAAAAAAAAAAAAA

    AAAAAAAAAAAAAA

    <div id="inner">

    </div>    

</div>

    <input type="button" onclick="doClick()" value="Click"/>

</body>

</html>

hookee 2009-09-16

打赏
举报



<script>

window.onload=function(){

  	var div = document.getElementById("pad");

  	div.style.height = div.scrollHeight + (div.scrollHeight - div.clientHeight);

  	div.style.zoom=1

}

</script>

<div id="pad" style="overflow-x:auto;width:100;" align="center">

    AAAAAAAAAAAAAA

    AAAAAAAAAAAAAA

</div>

link_1029 2009-09-16

打赏
举报

[Quote=引用 2 楼 hookee 的回复:]
HTML code<script>
window.onload=function(){var div= document.getElementById("pad");
div.style.height= div.scrollHeight+ (div.scrollHeight- div.clientHeight);
div.style.zoom=1
}</script><di¡
[/Quote]

这个方法我用了。只能解决DIV中内容不变的情况。
如果DIV里开始有display:none的对象。讲该对象显示后滚动条还是会挡住内容
比如



<html>

    <head>

        <script>

            window.onload=function(){

                var div = document.getElementById("pad");

                div.style.height = div.scrollHeight + (div.scrollHeight -      div.clientHeight);

                div.style.zoom=1

            }



function doClick()

{

	document.getElementById("inner").innerHTML = "CCCCCCCC";

}

</script>

</head>

<body>

<div id="pad" style="overflow-x:auto;width:100;" align="center">

    AAAAAAAAAAAAAA

    AAAAAAAAAAAAAA

    <div id="inner">

  	</div>	

</div>

	<input type="button" onclick="doClick()" value="Click"/>

</body>

</html>