overflow滚动条

vavid 2018-04-15


overflow滚动条

<body>

 <div style="height:600px;  width:1100px; ">

 随着中国北方冷空气的来袭，各种新潮的取暖设备又纷纷粉墨登场，除了前些年流行的暖宝宝贴片继续热卖之外，又有燃油

<div style="height:600px; width:1100px; overflow-x:hidden;overflow-y:hidden;"></div>

</div>

</body>

@先在外面写一个大的div,并且给他一个高度和宽度;,并且让他显示为滚动条 

<style type="text/css">

 div{

  overflow:scroll;

  overflow-x:scroll;

  overflow-y:scroll; 

  }

</style>

@在div里面再写一个div,但是这个div要大于外面的div的宽度和高度才能出现滚动效果。

@并且把里面的div的边框都隐藏起来overflow-x:hidden;overflow-y:hidden;"

vavid

vavid

相关推荐

必须掌握的CSS书写小技巧

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。display 设置一个元素是否显示或者如何显示。display

hellowzm / 0评论 2020-06-04

前端基础----CSS概要(三)

　　　　左浮动　　float:left;　　　　清除右浮动 clear:right;　　　　将元素变成行内块元素　display:inline-block;

尚衍亮 / 0评论 2020-02-18

2.6、css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。内容不会被修剪，会呈现在元素框之外。hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功

MaureenChen / 0评论 2020-02-03

css 之 float 时给父元素 加 overflow: hidden

<!DOCTYPE html>. <html lang="en">. <head>. <meta charset="UTF-8">. <title>demo

somboy / 0评论 2020-01-05

多行文本溢出显示省略号(…)全攻略

overflow: hidden;text-overflow: ellipsis;white-space: nowrap;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-web

sunshineboyleng / 0评论 2019-12-23

CSS 实现隐藏滚动条同时又可以滚动内容

ok，有了以上的代码就可以轻松的实现效果啦！

NARUTOLUOLUO / 0评论 2019-11-17

CSS之单行、多行文本溢出显示省略号

overflow: hidden. text-overflow: ellipsis. white-space: nowrap. 多行文本溢出。display: -webkit-box. -webkit-box-orient: vertical. -webk

wangjie / 0评论 2019-11-10

html文字两行后，就用省略号代替剩下的

实现原理很简单，将box的高度设置为行高的两倍，超出之后隐藏，这样就只有两行了，然后再用after属性绝对定位在第二行后面加几个点 ...注意设置宽高，剩下的就是记住用white-space（不换行），overflow，text-overflow

爱好HtmlCssJs / 0评论 2019-11-02

解析年度开发者报告，程序员你真的了解自己的行业么？

Stack Overflow作为全球最大的程序设计领域的问答网站，每年都会出据一份开发者调查报告。涉及众多领域，今天，挑其中和广大开发者最息息相关的几个重点调查结果给大家介绍一下。这份报告的受访者主要是国外的开发者，其中的数据并不能完全的反应中国开发者的实

hanqiusy / 0评论 2019-09-24

网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;的实现

在工作中遇到这么一个问题 —— 商品详情列表中，使用手动上下滑动，在android 手机中很流畅，在apple safari手机中却只能手滑动多长距离，滚动条就滚动多长距离，显得非常不流畅。在滚动条的div 中添加样式 -webkit-overflow-s

NeptuneSafari / 0评论 2015-07-16

Stack Overflow披露了最近黑客攻击事件的最新进展

Stack Overflow的黑客攻击事件仍在调查中，官方博客透露了调查的最新进展。这次入侵实际上发生在5月5日，当时部署到stackoverflow.com的开发层构建包含一个错误，允许攻击者登录到开发层，并在站点的生产版本上升级他们的访问权限。调查显示

xxwacm / 0评论 2019-05-18

hbase中缓存的优先级

// Scan entire map putting into appropriate buckets. hbase内部的blockcache分三个队列：single、multi以及memory，分别占用25%，50%,25%的大小。这涉及到family属

zxiaozhuT / 0评论 2011-06-15

Firefox CSS 自动高度

Firefox 加上overflow:auto 能自适应高度

ozhanjun / 0评论 2010-07-26

CSS 实现滚动时隐藏滚动进度条

-ms-overflow-style:none;overflow:-moz-scrollbars-none;

jjting / 0评论 2019-07-01

Web前端开发过程踩过的坑以及一些小方法技巧（持续更新）

$.bind;二、移动端点击输入框禁止手机输入法键盘弹出在移动端页面开发时，我们有时候经常会用到自己定义的输入键盘，而不想自带键盘弹出，那么可以在点击事件中加入以下代码：。这个在Android上使用以下代码就可以解决，但是iOS不起作用。-webkit-a

前端JavaScript / 0评论 2019-06-30

【学习笔记】CSS深入理解之overflow

《张鑫旭的CSS深入理解之overflow》学习笔记overflow基本属性overflow属性介绍overflow: visible(默认)|hidden|scroll|auto|inherit. 当overflow-x 与 overflow-y值不相同

ajhongshaorou / 0评论 2019-06-29

CSS清除浮动方法大全

一起跟随小编过来看看吧 1、父级div定义伪类：after和zoom ?1 2 3 4 5 6 7 8 9 10 11 12 13 14LeftRightdiv2原理：必须定义width或zoom:1，同时不能定义height，使用overflow:aut

csscode / 0评论 2019-06-29

[CSS]添加横向滚动条

<table id="datagrid" style="overflow-x:auto;width:auto; height: auto">插入overflow-x即可.插入在哪个标签,则滚动条针对哪个标

MaureenChen / 0评论 2019-03-27

css -> overflow:auto 中的scroll在 苹果手机safari 滚动不流畅问题

-webkit-overflow-scrolling: touch;overflow-x: scroll;

JamieCheung / 0评论 2017-08-01

jquery autocomplete设置下拉框高度

在jQuery autocomplte.css或项目自定义的css中加入以下css样式：。overflow-y: auto; //超过高度出现滚动条。overflow-x: hidden; //横向超出隐藏，如果要出现横向滚动，设置为auto即可

85403969 / 0评论 2016-10-25

通用css样式

body{font-family:"宋体", Arial,Verdana, sans-serif, Helvetica; font-size:12px; color:#010000;}. .clear{ clear: both; fon

teresalxm / 0评论 2016-08-12

css里的BFC的用法

</html>运行结果 解析：1和2margin重叠了；为了让3不跟1，2一样只用在3上面加一个overflow: hidden。-- 文档流 从上到下,当遇到float、position：absolute时，会离开文档流 -->

LadyZhong / 0评论 2019-06-28

css中的文本字间距离、行距、overflow

大多数浏览器的标准为110%-120%;标准应该也是20px；修改span的时候出现line-height的干扰，父标签div中的设置了该属性为55px，从而影响到子标签span的显示；设置或获取表明当内容超出对象高度或宽度时如何管理对象内容的值。over

覆雪蓝枫 / 0评论 2016-02-20

CSS 禁止滚动条

指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示；在里加入style="overflow-x:hidden"，可隐藏水平滚动条；

dangzhangjing / 0评论 2011-08-11

网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;的实现

在工作中遇到这么一个问题 —— 商品详情列表中，使用手动上下滑动，在android 手机中很流畅，在apple safari手机中却只能手滑动多长距离，滚动条就滚动多长距离，显得非常不流畅。在滚动条的div 中添加样式 -webkit-overflow-s

JamieCheung / 0评论 2015-07-16

Dom

<!<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>. <scripttype="text/java

luck / 0评论 2015-07-02

CSS - display,float,clear,overflow,visibility,<input type="hidden">

visibility：hidden 它和display：none的区别就在于后者不会占用那个位置，下一个元素会直接覆盖它，而前者是会占用那个布局，只是不显示内容，是 一片空白；并且下载的时候对于display：none就不会把不显示的元素给下载下来，而vi

lkwkqd / 0评论 2015-03-06

四个最诡异的 CSS 特性

JavaScript 作为一个创始人拍脑袋 10 天搞出的语言，JS 中包含了很多在今天看来很多不应该出现在现代语言中的诡异特性。其实，作为 Web 中必不可少的 CSS 语言也不逞多让。今天我就来聊聊我认为的那些最诡异的 CSS 特性。overflow-

覆雪蓝枫 / 0评论 2019-06-27

CSS盒模型深入

CSS盒模型标准模型IE模型标准模型width表示content的宽度，IE模型width表示border+padding+content的宽度。边距重叠子元素的外边距会反应在父元素上，相邻元素外边距会取较大值，空元素上下外边距会取较大值。BFCBFC指块

k韶华 / 0评论 2019-06-27

关于CSS中设置overflow属性的值为hidden的相关理解

包裹元素剪裁条件是不是包裹元素overflow设置为hidden以后，内部元素如果超过包裹元素的话就会被剪裁？答案是不一定，这要看此刻的CSS环境。根据对CSS2.1规范的理解，可以这样表述：如果一个元素的包含块的overflow属性设置为hidden，那

yibawuqing / 0评论 2019-06-27

css元素定位

position:absobule相对于父元素绝对定位，父元素必须包含position属性，而且父元素自身的位置所以设置position:relative. 绝对定位不占父元素的位置，几个元素如果定位置差不多就会重叠，设置z-index:1000,设置元素

hellowzm / 0评论 2014-07-27

overflow:hidden 的几种作用【转】

在IE6下，当子容器的宽高超出父容器时，父容器就会被撑开来。如果不事先告诉编辑这个区域是多少个字，程序又没有控制，那么CSS就可以用overflow:hidden的方法，仅仅显示一行。养成良好的清除浮动的习惯是必要的，不然有不少的 CSS BUG 问题是因

六天 / 0评论 2014-04-24

让TD支持完美支持overflow:hidden的CSS实现(转)

直接在TD上使用OVERFLOW：HIDDEN是无效的，百度之，多半的结论是使用DIV插入TD再使用OVERFLOW. 有人提议为其table定义宽度，并使用table-layout:fixed，结合white-space:nowrap实现了。再次埋头实验

张大晴 / 0评论 2014-01-26

CSS - div之overflow:scroll

如果只有文本超出div宽度时，才显示scroll，

福叔 / 0评论 2014-01-08

jQuery 选项卡，仿腾讯迷你首页，清爽无修饰版

#tab .tab_title{ width:500px; height:22px; overflow:hidden;left:0; top:0; clear:both; overflow:hidden; position:relative;}. #tab

有心就有方向 / 0评论 2013-11-03

jQuery 元素内部全是浮动元素时使用slideToggle函数的注意事项

我们要对.container元素，使用slideToggle函数，实现滑动打开和关闭。如果直接使用，会发现在滑动打开之后和滑动关闭之前，内部的元素会变窄，然后跑到中间。为了防止出现这种情况，我们要使用css，清除container内部元素的浮动。需要注意的

89387341 / 0评论 2013-07-25

jQuery 上下无缝滚动插件 列表溢出高度时 自动上下无缝滚动

<style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}a,a:visited{color:#5e5e5e; tex

天天无用 / 0评论 2013-07-09

纯CSS实现文字超过n行后省略功能

在切图阶段，经常会遇到，设计稿要求超出n行后剩余文字省略，并用...代替的需求。单行文字单行文字时实现比较容易，使用overflow: hidden和text-overflow: ellipsis即可，其中ellipsis即省略号的意思，使用width:

yibawuqing / 0评论 2019-06-25

Css样式兼容

发一个区块内的元素被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了。经发现可以采用overflow来解决！方法是在父元素加上如下代码即可。overflow:auto；是让高度自适应，zoom:1；是为了兼容IE6，也可以用hei

福叔 / 0评论 2013-05-30

CVE-2016-10191 FFmpeg RTMP Heap Buffer Overflow 漏洞分析及利用

2016年末paulcher发现FFmpeg三个堆溢出漏洞分别为CVE-2016-10190、CVE-2016-10191以及CVE-2016-10192。网上对CVE-2016-10190已经有了很多分析文章，但是CVE-2016-10191尚未有其他人

流萤 / 0评论 2019-06-25

Stack Overflow：帮助一百万开发者退出 Vim

讲道理，退出 Vim 的难度是开发人员的一个十分常见笑话。经验丰富的 Vim 用户告诉我，这种名声是不公平的，我相信他们是正确的。这意味着在工作日的高峰时段，每小时约有 80 人需要被帮助退出 Vim。当它很高时，它表明有多用户被 Vim 困扰。

言曌 / 0评论 2019-06-21

解决页面在ios机器上卡顿

}在使用overflow的的地方加上-webkit-overflow-scrolling: touch;便可解决页面在ios机器上卡顿的问题。

jscjxysx / 0评论 2019-06-21

CSS超实用小技巧

CSS超实用小技巧1.@media属性Media属性用于设置同一样式表在不同屏幕下的样式，可以在属性值中指定应用此样式的介质或媒体。虽然CSS语法并没有定义一个块元素居中的语句，但仍可使用automargin选项来实现这个功能。但要注意，需要给div设定宽

gigipop / 0评论 2013-04-10

ios页面overflow:scroll;滚动不流畅及手机web页面，软键盘弹出，输入框被遮住

例如，他会屏蔽页面上的很多点击事件和input框输入问题等等。当然这些都可以解决，但是弊端很多。于是乎，就有了-webkit-overflow-scrolling:touch;属性，来解决ios端带有overflow:sroll;属性的元素，让其滚动很流畅

xuweinet / 0评论 2019-06-21

让所有浏览器都支持max-height的CSS样式代码

"1000px":"");overflow:hidden;这里的1000和1000px是你需要的数值，注意3个数值的相同。让IE6支持最大高度max-height的时候别忘记加上overflow:hidden;

impress / 0评论 2012-09-11

css属性 text-decoration outline clear overflow text-indent

text-decoration属性：规定添加到文本的修饰。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。outline简写属性在一个声明中设置所有的轮廓属性。outline-style规定边框的样式。允许浮动元素出现在两侧。%定义

buttonChan / 0评论 2012-06-20

CSS Overflow 属性

根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为，我的意思是当盒子内外的内容改变的时候，它如何处理。比如，如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。这就是

lanzhusiyu / 0评论 2012-06-18

DIV style相关参数

所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。其功能大约是为了节约页面空间，就是所谓的“缩地”了。看看效果如何吧，代码在下一楼提供。

liusure0 / 0评论 2011-09-27

css overflow属性

定义和用法overflow 属性规定当内容溢出元素框时发生的事情。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

css教程 / 0评论 2011-08-24