• 首页

    • 关于ul 属性overflow:auto不出滚动条

    这段代码在火狐中测试ul是有滚动条的。但是IE没有。高手帮忙看看怎么样才能在IE中显示出来。代码中引用了jquery。复制后可以直接运行
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".b").click(function(){

    if($(this).siblings().is(":hidden") || $(this).is(":only-child")){
    $(".b").each(function(){
    if(!$(this).siblings().is(":hidden")){
    $(this).siblings().slideUp(0);
    }
    });
    }
    $(this).siblings().slideToggle(1000);
    });
    });
    </script>
    <style type="text/css">

    ul{
    padding:0px;
    margin:0px;
    height:65px;
    width:100px;
    overflow:auto;
    }
    li{
    padding-left:10px;
    }
    </style>
    </head>
    <body>
    <div style="">

    <div class="a">
    <div class="b">bbb</div>
    <ul style="display:none">
    <li>test</li>
    <li>test</li>
    <li>test</li>
    </ul>
    </div>
    <div class="a">
    <div class="b">bbb</div>
    <ul style="display:none">
    <li>test</li>
    <li>test</li>
    <li>testzxcvz</li>
    <li>testasfsadf</li>
    </ul>
    </div>
    <div class="a">
    <div class="b">bbb</div>
    <ul style="display:none">
    <li>test</li>
    <li>test</li>
    <li>test</li>
    </ul>
    </div>

    </div>
    </body>
    </html>

    推荐答案   2012-03-01
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>无标题页</title>
    <style type="text/css">
    .Attopic{display:block; left: 56px; position: absolute; top: 68px; z-index: 999; background: #fff; border: 1px solid #ccc;

    padding: 2px; width: 180px; height: 100px; overflow-x:hidden; overflow-y:hidden;}
    </style>
    </head>
    <body>
    <ul id="tidao" style="" class="Attopic">
    <li><input type="text" onclick="elect('mingfang2009')" value="mingfang2009" class="atinput" id="textfield"

    name="textfield"></li>

    <li><input type="text" onclick="elect('dandan')" value="dandan" class="atinput" id="textfield" name="textfield"></li>

    <li><input type="text" onclick="elect('vincen')" value="vincen" class="atinput" id="textfield" name="textfield"></li>

    <li><input type="text" onclick="elect('hua103')" value="hua103" class="atinput" id="textfield" name="textfield"></li>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>无标题页</title>
    <style type="text/css">
    .Attopic{display:block; left: 56px; position: absolute; top: 68px; z-index: 999; background: #fff; border: 1px solid #ccc; padding: 2px; width: 180px; height: 100px; overflow-x:hidden; overflow-y:hidden;}
    </style>
    </head>
    <body>
    <ul id="tidao" style="" class="Attopic">
    <li><input type="text" onclick="elect('mingfang2009')" value="mingfang2009" class="atinput" id="textfield" name="textfield"></li>

    <li><input type="text" onclick="elect('dandan')" value="dandan" class="atinput" id="textfield" name="textfield"></li>

    <li><input type="text" onclick="elect('vincen')" value="vincen" class="atinput" id="textfield" name="textfield"></li>

    <li><input type="text" onclick="elect('hua103')" value="hua103" class="atinput" id="textfield" name="textfield"></li>

    <li><input type="text" onclick="elect('hemin')" value="hemin" class="atinput" id="textfield" name="textfield"></li>
    </ul>
    <script type="text/javascript">
    var ul = document.getElementById("tidao");
    var childs = ul.childNodes;
    var height = 0;
    for(var i = 0 ; i < childs.length; i ++)
    {
    if(childs[i].tagName == "LI") height+=childs[i].offsetHeight;
    }
    if(height>100) ul.style.overflowY="scroll"
    </script>
    </body>
    </html>

    </ul>
    <script type="text/javascript">
    var ul = document.getElementById("tidao");
    var childs = ul.childNodes;
    var height = 0;
    for(var i = 0 ; i < childs.length; i ++)
    {
    if(childs[i].tagName == "LI") height+=childs[i].offsetHeight;
    }
    if(height>100) ul.style.overflowY="scroll"
    </script>
    </body>
    </html>
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2020-11-17
    页面中有很多时候需要多区域定相应的宽高，然而当内容过多时会出现超出元素区域或出现滚动条的情况，如何解决这种状况呢？一起去看看吧！

    一、滚动条样式相关的CSS属性

    overflow属性规定当内容溢出元素框时需要对其进行的操作，即指当对象的内容超过其指定高度及宽度时如何显示内容。

    1、overflow属性的值

    visible：默认值内容不会被修剪，呈现在元素框之外。

    hidden： 内容会被修剪，超出元素的内容隐藏，即不可见。

    scroll： 内容会被修剪，超出的内容会出现滚动条，用滚动的方式查看其余的内容。

    auto： 浏览器会根据内容相对于元素的宽高自动添加滚动条，用滚动的方式查看其余的内容。

    inherit：规定从父元素继承其overflow属性的值。

    2、定义与滚动相关的属性及其值

    overflow:auto; 会根据内容相对于元素的宽高自动添加滚动条。

    overflow:scroll; 显示横、纵向滚动条。

    overflow-x:hidden; 不显示横向的滚动条。

    overflow-y:hidden; 不显示纵向的滚动条。

    overflow-x:scroll; 显示横向的滚动条。

    overflow-y:scroll; 显示纵向滚动条。

    3、滚动条的样式与滚动属性的运用

    滚动条的样式与滚动属性的运用示例

    二、在页也中去掉指定方向滚动条

    1、去掉横向滚动条

    <body style="overflow:scroll;overflow-x:hidden">或selector{overflow:scroll;overflow-x:hidden}。

    2、去掉竖向滚动条

    <body style="overflow:scroll;overflow-y:hidden">或selector{overflow:scroll;overflow-y:hidden}。

    3、去掉滚动条：

    <body scroll="no">或selector{overflow:hidden;}

    三、CSS实现隐藏滚动条同时又可以滚动

    即可以隐藏滚动条，同时又保证页面可以滚动？

    使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。

    由于只需要兼容移动浏览器（Chrome 和 Safari），可以使用自定义
    第2个回答  2020-11-17
    关于ul 属性overflow:auto不出滚动条？Copyright © 1999-2020, CSDN.NET, All Rights Reserved

    
     登录
    
    wybshyy
    关注
    overflow不超出时不显示滚动条 属性解决内容未超出依然显示滚动条轨道的问题 原创
    2020-09-03 17:24:58
    
    wybshyy 

    码龄11年

    关注
    overflow不超出时不显示滚动条

    竖着的滚动条自动overflow-y: auto

    横着的滚动条自动overflow-x: auto

    overflow-y未超出仍然显示滚动条解决办法
    后端返回的数据有时多有时少，多的时候需要设置最大高度和滚动条显示，于是css样式如下： p { max-height: 100px; overflow-y: scroll; } 效果：即使不超过这个高度，也会出现右边的滚动条，显然不是想要的。改进如下： p { max-height: 100px; overflow-y: auto; } 效果是：...
    浏览器打开
    
    规定元素宽高，内容超出则显示滚动条，内容不超出则隐藏滚动条。
    前端小GET，好久没用，需求用到了突然忘记了，找了一番才找到，那么顺便记录下来吧。 <div id="v1"></div> <style type="text/css"> #v1{width: 100px;height: 100px;overflow-y:auto ;} </style> 内容超出100px则出现滚...
    浏览器打开
    element的级联选择器Cascader无滚动条样式全部显示超出屏幕解决办法
    查了半天在大佬的博客里找到解决办法了, // 在全局的global.css样式中给el-cascader-panel添加高度 .el-cascader-panel{ height: 200px; } 原因在评论区: // 版本不一致造成的，你如果把浏览器窗体缩小显示就能看到整个级联选择器了，它是全部显示出来没有滚动条。强制在全局样式中更改就可以了。在组件内部样式中修改不好用 ...
    浏览器打开
    导入EXCEL表时,提示找不到可安装的ISAM怎么办_小熊猫-CSDN博客
    ajax有时请求不到数据 后台,有时收不到返回值的解决办法 overflow不超出时不显示滚动条 属性解决内容未超出依然显示滚动条轨道的问题 电脑C盘缓存路径在哪,清理...
    CSS溢出属性overflow:auto溢出的时候才显示滚动条 不溢..._CSDN博客
    /* scroll 溢出的部分显示滚动条 不溢出也显示滚动条 */ /* overflow: scroll; */ /* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */ overflow: auto...
    overflow 当内容溢出元素框 出现滚动条
    overflow-x: visible|hidden|scroll|auto|no-display|no-content;x 说明： overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。 值 描述 测试 visible 不裁剪内容，可能会显示在内容框之外。 测试 hidden 裁剪内容 - 不提供滚动机制。 ...
    浏览器打开
    overflow: scroll隐藏滚动条的问题
    最近用vue写wap站的时候遇到了微信打开页面滚本回答被网友采纳
    第3个回答  2015-11-30
    ul那里加上overflow:scorll就行
    然后保证ul的长度大于外围的div的长度

    相关了解……

    你可能感兴趣的内容

    大家正在搜
    overflow属性autoword没有滚动条div出滚动条overflow的意思overflow用法1月overflowoverflow失效overflow标签overflow更新
    相关问题
    为什么css的overflow不显示滚动条
    div 滚动条不出现，overflow属性失效的问题，代码如...
    设置了div的overflow属性为auto，div里还有1...
    HTML和BODY的overflow都是auto，图片也超过...
    页面如何自动出现滚动条(overflow属性用法)
    CSS 设置的高度超出屏幕高度为什么没出现滚动条
    【CSS】为什么设置不显示滚动条不好用呢？
    怎么取消360浏览器下面的滚动条? 我的DIV的overfl...

    本站内容来自于网友发表，不代表本站立场，仅表示其个人看法，不对其真实性、正确性、有效性作任何的担保
    相关事宜请发邮件给我们
    © 非常风气网