精华内容
下载资源
问答
  • 谁知道点一下div滚动条向上向下按钮,div滚动的距离怎么设置? ![图片说明](https://img-ask.csdn.net/upload/201605/30/1464577468_520640.png) 就点一下这个,div滚动的距离
  • div设置滚动条

    千次阅读 热门讨论 2018-05-20 20:06:07
    在html中,怎么使div中的内容超出后自动显示滚动条的效果?最近在做项目中遇到这样的一个问题,因为在弹框中的内容太多,弹框的大小固定,超出的内容我们用滚动条的效果来解决。

    前言

    在html中,怎么使div中的内容超出后自动显示滚动条的效果?最近在做项目中遇到这样的一个问题,因为在弹框中的内容太多,弹框的大小固定,超出的内容我们用滚动条的效果来解决。


    叙述

    怎么让div内容超出后自动显示滚动条,只需要用到css的一个overflow:auto的属性就可以实现这效果了。

    自动显示

    在外部的div的class里面设置:overflow:auto即可。先要给定要设置出现滚动条div的宽高,内容超出给定的宽高之后,即可出现滚动条效果。

    ##滚动条一直存在
    如果你想让滚动条自始至终都存在,而不仅仅是内容超出后才出现,可以用overflow:scroll属性

    怎么只显示横向的滚动条

    可以设置:overflow-x:scroll,或者:overflow-y:hidden即可实现这个效果。
    同理如果overflow-y:scroll或者:overflow-x:hidden是只显示竖的滚动条,不显示横向的滚动条。


    overflow的属性
    1、overflow:auto ;内容会被修剪,超出设置的宽高后会出现滚动条

    2、overflow:scroll;内容会被修剪,不管内容是否超出,都会出现滚动条的位置

    3、overflow:visible;这个是默认值,内容不会被修剪,会出现在元素框外面。

    4、overflow:hidden;内容被修剪,多余的内容被隐藏

    5、overflow:inherit;从父元素那里继承overflow的值。

    小结

    没事多百度,没有查不到哦。
    感谢您的阅读~~

    展开全文
  • 怎么样在div+css中设置一个div的框并出现滚动条 50 怎么样在div+css中设置一个div,给他设置宽和高,并让他出现滚动条 匿名 | 浏览 15970 次 |举报 我有更好的答案 推荐于2017-06-16 14:41:29 ...

    怎么样在div+css中设置一个div的框并出现滚动条 50

    怎么样在div+css中设置一个div,给他设置宽和高,并让他出现滚动条
    匿名 | 浏览 15970 次 |举报
    我有更好的答案
    推荐于2017-06-16 14:41:29 最佳答案
    <div style="width:260px;height:120px; overflow:scroll; border:1px solid;"> 这里是你要显示的内容 </div>

    其他回答

    border:1px solid gray;//给div设置边框

    overflow:auto;//内容超出出现滚动条
     本回答被网友采纳
    脚踏祥云day  | 推荐于2017-08-08 08:30:13
    举报| 评论 
    0 1
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    .div{
        width:100%;
        height:200px;
        overflow-x:hidden;
        overflow-y:auto;
    }
     
    /*兼容IE*/
    .div{
        scrollbar-face-color#20a774;/*移动滑块颜色*/
        scrollbar-shadow-color#20a774;/*移动滑块边框颜色*/
        scrollbar-track-color#ccc;/*背景颜色*/
        scrollbar-arrow-color#ddd;/*箭头颜色*/
    }
    .div::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color#ccc;
    }/* 滚动条的滑轨背景颜色 */
    .div::-webkit-scrollbar
    {
        width6px;
        background-color#ccc;
    }
     
    .div::-webkit-scrollbar-thumb
    {
        background-color#20a774;
    }/* 滑块颜色 */

    当div内的内容超过200px时才会显示滚动条,下边的代码是对滚动条的优化,希望对你有帮助。

     本回答被网友采纳
    WANGWANG碎冰冰  | 推荐于2017-07-12 06:50:50
    举报| 评论 
    4 0
    div 加滚动条的方法:

    <div style="position:absolute; height:400px; overflow:auto"></div>
    div 设置滚动条显示:overflow :yes
    div 设置滚动条自适应显示:overflow :auto
    div 设置上下滚动条显示:overflow-y :yes
    div 设置上下滚动条自适应显示:overflow-y :auto
    如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative
     本回答被网友采纳
    252478859  | 发布于2016-12-24 02:32
    举报| 评论 
    1 6

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

    overflow-y:visible; 不剪切内容也不添加纵向滚动条

    overflow-x:scroll; 总是显示横向滚动条

    overflow-x:visible : 不剪切内容也不添加横向滚动条

    例如:

    1
    <div style="width:500px; height:500px; overflow-y:scroll;"></div>
    L849853200  | 发布于2017-08-01 18:20
    举报| 评论 
    0 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
        <style type="text/css">
        .div1 {
            width: 500px;
            height: 200px;
            background: #eee;
            overflow: auto;
        }  
        </style>
        <div class="div1">
            百度知道是一个基于搜索的互动式知识问答分享平台,于2005年6月21日发布,并于2005年11月8日转为正式版。百度知道一直探索国际化发展,于2012年3月31日发布百度知道台湾版。“百度知道”,是用户自己根据具有针对性地提出问题,通过积分奖励机制发动其他用户,来解决该问题的搜索模式。 同时,这些问题的答案又会进一步作为搜索结果,提供给其他有类似疑问的用户,达到分享知识的效果。
    百度知道的最大特点,就在于和搜索引擎的完美结合,让用户所拥有的隐性知识转化成显性知识,用户既是百度知道内容的使用者,同时又是百度知道的创造者,在这里累积的知识数据可以反映到搜索结果中。通过用户和搜索引擎的相互作用,实现搜索引擎的社区化。
    百度知道也可以看作是对搜索引擎功能的一种补充,让用户头脑中的隐性知识变成显性知识,通过对回答的沉淀和组织形成新的信息库,其中信息可被用户进一步检索和利用。这意味着,用户既是搜索引擎的使用者,同时也是创造者。百度知道可以说是对过分依靠技术的搜索引擎的一种人性化完善。
        </div>
    </body>
    </html>

    JviEll  | 发布于2017-07-19 10:01
    举报| 评论 
    0 0
    首先给你的div设置宽高,然后设置
    overflow-y: auto;
    overflow-x: hidden;
    属性,这样的话超出你设置的高度,就会出现流动条
    亦舞200704  | 发布于2017-07-13 14:45
    举报| 评论 
    0 0

    效果入下

    代码如下

    <html>
    <head></head>

    <body>

    <div style="font-size:40px; color:red; font-wight:700 "></div>

    <div style="width:100%" ><img src="img/1.jpg"></div>

    <div style="width: 300px; height:100px; overflow-y:scroll; border: 1px solid red ">在抓捕了巫支祁以后,李子玉和高重九当天就登上了去往临高的船。李子玉从来没有见过这么大的船。虽然元老院已经进入广州多日,但是由于平时任务的繁忙,偶有时间也被好学的李子玉用来学习澳洲知识,所以一直没有机会去见识一下澳洲大船。因为李子玉和高重九是先进工作者,他们被允许在船的部分地方自由活动。李子玉和高重九一边感叹船的雄壮宏伟,一边转悠。他们走到前边甲板上的时候,迎面走来一队人,这队人全部都是短发短衣,中间为首的人的气质明显与其他人不同。这一行人就是元青团第一书记何青辰带领的前往临高参观学习的广州优秀青年代表。在抓捕了巫支祁以后,李子玉和高重九当天就登上了去往临高的船。李子玉从来没有见过这么大的船。虽然元老院已经进入广州多日,但是由于平时任务的繁忙,偶有时间也被好学的李子玉用来学习澳洲知识,所以一直没有机会去见识一下澳洲大船。因为李子玉和高重九是先进工作者,他们被允许在船的部分地方自由活动。李子玉和高重九一边感叹船的雄壮宏伟,一边转悠。他们走到前边甲板上的时候,迎面走来一队人,这队人全部都是短发短衣,中间为首的人的气质明显与其他人不同。这一行人就是元青团第一书记何青辰带领的前往临高参观学习的广州优秀青年代表。在抓捕了巫支祁以后,李子玉和高重九当天就登上了去往临高的船。李子玉从来没有见过这么大的船。虽然元老院已经进入广州多日,但是由于平时任务的繁忙,偶有时间也被好学的李子玉用来学习澳洲知识,所以一直没有机会去见识一下澳洲大船。因为李子玉和高重九是先进工作者,他们被允许在船的部分地方自由活动。李子玉和高重九一边感叹船的雄壮宏伟,一边转悠。他们走到前边甲板上的时候,迎面走来一队人,这队人全部都是短发短衣,中间为首的人的气质明显与其他人不同。这一行人就是元青团第一书记何青辰带领的前往临高参观学习的广州优秀青年代表。</div>

    </body>


    </html>

    lidjio  | 发布于2017-07-10 09:28
    举报| 评论 
    0 0
    设置这个div的scorll属性。
    S554097550  | 发布于2017-06-16 11:38
    举报| 评论 
    0 0
    展开全文
  • 但是,有时,我们不希望指定div的高度,或者不好给定某个高度,时,怎么设置滚动条呢? 看下面代码 .parent{ position:relative; height:100%; } .child { position:absolute; top:0; bottom:0; overflow-y...

    不设置div高度实现自动滚动条

    div设置滚动条时,一般需要指定高度,再设置overflow-y:auto 方才有效。但是,有时,我们不希望指定div的高度,或者不好给定某个高度,时,怎么设置其滚动条呢?

    看下面代码

    .parent{
        position:relative;
        height:100%;
    }
    .child {
        position:absolute;
        top:0;
        bottom:0;  
        overflow-y:auto;
    }
    
    <div class="parent">
        <div class="child"></div>
    </div>
    
    展开全文
  • 对于居中有很多方法,本次介绍一个不用js获取窗口,纯css给div“肉眼上的”上下左右居中,并且没有滚动条的实例。为什么说是“肉眼上的”,可以看看下面的介绍。话不多说,先来感受一下!!!点击图片跳转通过上面一...

    前端开发中,免不了居中的需求。对于居中有很多方法,本次介绍一个不用js获取窗口,纯css给div“肉眼上的”上下左右居中,并且没有滚动条的实例。为什么说是“肉眼上的”,可以看看下面的介绍。话不多说,先来感受一下!!!

    e2c0858dd19c704c4877f0fb87b32ced.png

    点击图片跳转

    通过上面一个案例,可以看到无论怎样调整游览器窗口的大小,都不会出现滚动条,div始终在中间。div宽度大于窗口会被隐藏掉

    如何实现?

    上面的案例就是利用了CSS的 vertical-align 属性。

    vertical-align 属性是设置元素的垂直对齐方式,display 属性是规定元素应该生成的框的类型。在通过设置HTML的高度,居中就可以实现DIV的上下左右居中

    具体案例:

    1、首先初始化下边距,定义html和body的高度为100%,设置文本居中

    2、定义一个需要居中的div,class值为“a”,顺带设置下宽高,背景,方便查看

    3、然后给div设置display: inline-block;,vertical-align: middle;。当翻看W3S手册时候,发现vertical-align: middle是把此元素放置在父元素的中部。并且vertical-align:middle是属于行内垂直居中,所以需要搭配display: inline-block一起使用才可以。* {

    margin: 0;

    padding: 0

    }

    html {

    height: 100%;

    text-align: center;

    }

    body {

    height: 100% ;

    }

    .a{

    width: 300px;

    height: 250px;

    background: #999999;

    display: inline-block;

    vertical-align: middle;

    }

    dac0a616d189b1ae2adb32fc33132e44.png

    此时div是在窗口的最上方居中的,下面介绍如何设置上下居中

    4、我们需要在“a”的div,再添加一个同级的div,且定为“b”。只需要设置如下属性.b {

    height: 100%;

    display: inline-block;

    vertical-align: middle;

    }

    再次刷新页面已经可以看到效果了

    为什么加一个空的DIV?

    如果你测试过div“b”只给一个背景和宽高时,发现div“b”的高占div“a”一半的高度。

    b6683865b42f800c27e6213bf9da9015.png

    当设置div“b”高度为窗口的100%时,并且加上vertical-align等属性,就可以理解成“相互之间对齐了对方的中间位置”,也就实现div“a”的居中

    9f0c695aa3a17ffeb57ac6419eada2a8.png

    vertical-align具体的解释,可以多百度一下,知道的都写在上面,如果错误,欢迎指正

    其实从上面的图片可以看出还是有像素之差的,大概在1px到3px之间。并不是严谨的左右居中,当你调小窗口的时候还是可以分辨的。这个我们通过设置其中一个div的margin为负值或者设置width为0即可。其实还是有细微差别的

    144804bdf0a4da9ca6a02d3bfa4deaa5.png

    展开全文
  • div定义的宽度 = 内容宽度+滚动条宽度。出现滚动条会导致内容偏移,想让滚动条不占宽度该如何设置,下面我们来看一下css设置滚动条不占宽度的方法。定义一个标签,标签的宽度为内容宽度加上滚动条宽度,可以设置滚动...
  • 如果想让div横向充满页面,则可以设置宽度为100%,如,但是这样以来如果设置这个div的边框为1个像素,就会出现一个横向的滚动条,解决办法就是不设置100%,因为div默认就是100%宽度的,而且这个宽度是包括边框的。
  • 获取这个元素,然后设置它的滚动条的位置为初始位置(0,0)。  document.getElementById(..).scrollTop = 0; 转载于:https://www.cnblogs.com/the-one/p/5923774.html...
  • 怎么div横向排列不换行,超出之后滚动条

    万次阅读 热门讨论 2018-12-07 16:05:07
    在最外层div box1 设置宽度 且overflow-x:scroll 在里面那层div box2不设置宽度 且white-space:nowrap 在list元素随意设置宽度 (如果用nowrap时候 list不能设置float) (如果用非要list设置float实现横排的话...
  • css设置div的默认高度为50px,当div里面的内容很多时,div自适应增加高度,当高度达到200px时高度不再增加,而是让这个div显示滚动条。 请问谁能告诉我怎么实现,谢谢!
  • 或者 IE6中,使用CSS定义DIV的高度的时候经常遇到这个问题,就是当DIV的最小高度小于一定的值以后,就会发现,无论你怎么设置最小高度,Div的高度会固定在一个值不再发生变动,这个问题很是烦人。这是因为在IE6中,...
  • 一开始我使用滚动条来实现优化,有顿操作: 诶,怎么还是没有变化?最后我发现是因为在这个外层 div 外还有一个大的 div 包裹着,和这个外层div 同级还有一个头部 div,大致如下: 这时候我设置的 height:100%意思...
  • 内容滚动条和子div高度自适应

    千次阅读 2017-03-23 15:43:10
    内容滚动条和子div高度自适应 写在前面:老套路有图有真相,这才叫做分享。本文内容是:一个div里面,两个子div高度自适应(平分父div的高度)和元素内容过多的时候,根据需求出现高度滚动条或者宽度滚动条。 先...
  • <div style="overflow: auto;max-height: 420px"> 序号 产品名称 规格 保质期 计量单位 ()"><span class="glyphicon glyphicon-plus"></span>新计量单位...为什么会导致触发外层div滚动条。应该怎么解决呢
  • IE6中,使用CSS定义DIV的高度的时候经常遇到这个问题,就是当DIV的最小高度小于一定的值以后,就会发现,无论你怎么设置最小高度,Div的高度会固定在一个值不再发生变动,这个问题很是烦人。这是因为在IE6中,系统...
  • 对局部需要滚动条的元素,使用这个css属性:-webkit-overflow-scrolling: touch;实测;
  • 用css怎么设置div滚动条的样式,可改变大小的overflow: auto; 在需要时内容会自动添加滚动条 overflow: scroll; 总是显示滚动条 overflow-x: hidden; 禁止横向的滚动条 overflow-y: scroll; 总是显示纵向滚动条width...
  • 怎么用CSS给html加横向滚动条并且隐藏竖向滚动条 解决方法:隐藏竖向滚动条在子页面的<...标签里加入以下格式:<... overflow-y:hidden">,style="overflow:auto",当...设置div横向滚动条div <style="overfl...
  • IFRAME的滚动条颜色怎么改变

    千次阅读 2006-03-24 10:16:00
    如果无法在内嵌网页里写入css style(比如你非要嵌入sina的主页,又没法让sina的工程师把sina的网页设计改掉),那么你可以用包裹你的iframe,用div的style去设置滚动条。在里加上那个改变的滚
  • 来源:资料 之前弄过这个,然后就是记不住。在网上找了天资料,怎么都不行 解决办法: 首先:不管你的外层div 是浮动 还是相对定位 绝对定位,都得在el-scrollbar得外层div 设置个高度。...// 上面隐藏横向滚动条
  • 当我们的内容超出了我们的div,往往会出现滚动条,影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。 ...
  • 怎么设置tab页面内容宽高超出 w,h 就自动产生滚动条哇(页面上右边部分已经设置了fit:true: div data-options="region:'center',border:false,fit:true" class="easyui-tabs"但是显示出来的页面,还是不能出现滚动...
  • 无法设置横向滚动条,麻烦有懂的指点一下怎么添加横向滚动条,谢谢! 这是相关代码: div class=" bootstrap-admin-panel-content"> table class="table table-striped table-bordered" id="list-video"> ...
  • CSS 如何添加水平滚动条CSS 如何添加水平滚动条 我知道怎么加垂直滚动条设置 overflow 属性: div { width:150px; height:150px; overflow:auto; }overflow属性如下: auto:当此div子元素宽和高大...
  • 在iphone(ios11)中(其他苹果设备未尝试),不论是在微信的浏览器中,还是在其他浏览器中,iframe的滚动条怎么设置都没有效果,页面内容都无法进行滚动; 解决方法: 将iframe包裹在div中 为div设置样式 : -webkit-...
  • 1、数据网格(DataGrid)所在的table属性上级div无需设置width; 2、.datagrid属性:fitColumns为false 或者不填 3、在style中给.datagrid-body设置overflow:auto; <style> .datagrid-body{ ...

空空如也

空空如也

1 2 3 4
收藏数 64
精华内容 25
关键字:

div滚动条怎么设置