none
IE下禁用外部滚动条的问题 RRS feed

  • 问题

  • 如图我想在实现IE内实现上面的功能,但是IE最外的滚动条总是会自动出现,如果设置为overflow-y:hidden,外部的滚动条会消失,但内部的滚动条无法正常使用

    以下为html的代码

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style>
        *{
            padding: 0;
            margin: 0;
        }
    html,body{
        width: 100%;
        height: 100%;
    }
        </style>
    
    </head>
    <body scroll="no">
    <table style="width: 100%;height: 100%;border:none;border-collapse: collapse;">    
        <tr style="background: red;height: 1px;" id="top"><td><div><p>top</p><p>topppppp</p></div></td></tr>
        <tr style="background: green;"><td>
    	<div style="height:100%; overflow-y:scroll">
    	<div style="height:1000px;">
    	<p>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br></p>		
    	</div>
    	</div>
    	</td></tr>
        <tr style="background: blue;height: 1px;" id="bottom"><td><p>botttom</p><p>botttommmmmmmmmmm</p></td></tr>
    </table>
    </body>
    </html> 

    2016年11月5日 15:41

全部回复

  • 你好,

    根据你的代码, 我做了一个小例子,我发现了一个问题,那就是你设置了你的table 的高是100%div的高也是100%。

    如果你设置了这个属性那么你的table将会100%显示在你的页面上,里面所有的元素都是这样。

    你可以想象一下,我都100%显示了,我还需要滚动条吗?

    所以你会发现这个滚动条没用。

    我建议你可以参照如下代码修改:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            html, body {
                width: 100%;
                height: 100%;
            }
        </style>
    
    </head>
    <body scroll="no">
            <table style="width: 100%;border:none;border-collapse: collapse;">
                <tr style="background: red;height: 1px;" id="top"><td><div><p>top</p><p>topppppp</p></div></td></tr>
                <tr id="scor" style="background: green;">
                    <td>
                        <div>
                            <div style="height:500px;overflow-y:scroll;">
                                <p>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br></p>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr style="background: blue;height: 1px;" id="bottom"><td><p>botttom</p><p>botttommmmmmmmmmm</p></td></tr>
            </table>
    </body>
    </html> 

    结果:


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2016年11月7日 2:26
  • 我的代码在chrome里能实现

    这么写主要是因为浏览器的高度不确定,但是我希望中间的内容能够自动填充,如果设置一个固定高度,过大或过小都会有问题

    2016年11月7日 8:31
  • 你好,

    这个可能和各个浏览器对CSS样式的解析有关,毕竟chrome和IE时不一样的。

    我建议你可以在JS中写一个浏览器判断,如果是chrome设置成百分比形式,如果是IE设置成定额数值形式。

    具体你可以参照如下了链接:

    http://blog.csdn.net/oscar999/article/details/8272798


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2016年11月13日 14:44