All about Div内显示滚动桥

Div内显示滚动桥看似是一个简单的前端问题,然而实际会发现还是有挺多需要注意的.

本文尝试对div内显示滚动桥的各种主要实现及一些难题进行研究.

横向滚动桥

横向滚动桥比较简单,无需设置宽度,直接overflow-x:auto就ok.

这里需要注意的是使用white-space:nowrap去避免自动换行,导致横向滚动桥出不来。

如果要确保横向滚动桥显示,关键点是要不自动换行:

  1.  使用white-space:nowrap去避免自动换行,否则会导致横向滚动桥出不来。
  2.  如果有内部元素,内部元素需要使用inline-block layout,如果使用float会导致自动换行。 

纵向滚动桥

设置固定高度

如果设置高度,直接overflow-y:auto就ok. 没有什么需要特别注意的。

不设置固定高度

如果不设置固定高度,有两种常见的靠谱方法.

  1. 使用css3, vh视窗单位设置视窗高度.例如设置div为height:100vh代表, 这个div将占满整个屏幕可视高度,实际的场景一般不需要这样,另如通常div容器的适当高度为屏幕总高度减去导航栏的高度, 因此一般结合css3 calc来使用,例如

    #container{ height:calc(100vh - 100px) }

    实例:

  2. 使用max-height属性。备注:有时需求并不适合用max-height的方式。

    #container{
      max-height:500px;
    }
  3. 使用javascript设置正确的高度,这个没什么可说了,一种变通设置高度的方法,类似第一种方法,但需要javascript实现,对于新版的浏览器,直接使用文中第一种方法(CSS3 calc+vh)就好了。

相关资料:

CSS calc

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

CSS3 vh单位

https://developer.mozilla.org/en-US/docs/Web/CSS/length

查看兼容性

http://caniuse.com/#search=calc

时间: 2024-10-06 23:16:15

All about Div内显示滚动桥的相关文章

DIV内滚动条滚动到指定位置

相对浏览器,将指定div滚到到指定位置,其用法如下: $("html,body").animate({scrollTop: $(obj).offset().top},speed); ps:obj是需要定位的对象,speed是滚动的速度 然而如果需要相对某一个容器(称之div1),将其内部的div2滚动到相对div1的指定位置,用法如下: $("div1").animate({scrollTop: $("div2").position().top}

CSS实现div内文字显示两行,超出两行部分省略号显示

在搭建前台文章列表中,需要实现div内文字显示两行,超出的则省略号显示. 找了很多,都貌似只能一行显示.最后在百度知道找到答案. 答案转自百度知道,题主的自答. 用的是-webkit-私有属性.text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; 另有回

ios 下防止整个网页滑动(阻尼回弹 . 瞒天过海,骗IOS,把阻尼回弹限制在滚动区div内

下面是一个手机APP页面,分成上中下三部分,最上面和最下面是固定的,中间可以滚动.这是常见的APP布局方式. <style> .box{ overflow: auto; -webkit-overflow-scrolling: touch; /*使得div内的超出滑动具有惯性,阻尼回弹等特性,否则滑动很生涩*/ } </style> </head> <body class="box" > <div id="top"

CSS div内文字显示两行,超出部分省略号显示

1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKit内核的css前缀为“-webkit-”,Comodo Drangon(科摩多龙),苹果,安卓,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速版,SRWare Iron,猎豹浏览器,RockMelt,QQ浏览器都可识别. 备注:IOS版的微信.android版本

white-space norma nowrap强制同一行内显示所有文本文字,让所有文字内容中一排显示不换行

日常我们为了让文字内容在一行内显示完,哪怕宽度不够也不能换行,我们可以使用white-space样式,但如果遇到了html br强制换行标签,无论是设置white-space与否都会被<br>强制换行. 昨天仿照娜姐做的标题滚动,自己照着那个js也写了一个,结果发现死活就是不滚动,今天早上发现原来还有一段CSS代码没有看到,这个css代码尤为重要. 其中就是有一个属性: white-space:nowrap; 2.white-space参数:normal : 默认处理方式nowrap : 强制

iframe 内显示的网页 只显示改网页的某一部分!

使用iframe调用指定网页的特定位置(显示目标网页某区域的我想要的内容) 有些时候我们并不需要显示iframe标签属性src指定的目标网页的所有内容,往往只需要显示某一特定区域.现有两种实现方法提供,但严禁使用此方法用于欺骗.隐瞒目的. 这里用到了Iframe的一些属性,稍微介绍下:        1. marginheight 属性规定框架内容与框架的上方和下方之间的高度,以像素计.        2. maiginweidth 属性规定框架内容与框架的左侧和右侧之间的高度,以像素计.  

div居中代码 DIV水平居中显示CSS代码

如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto:其两个样式需要配合使用才能实现div盒子的居中显示排版. 首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中. 实例讲解div居中代码应用,为了观察div居中效果,我们对div设置一个div命名为".div&

设置DIV随滚动条滚动而滚动

有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml&quo

用CSS让字体在一行内显示不换行(收藏)

当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法   一般的文字截断(适用于内联与块): .text-overflow{display:block;                     /*内联对象需加*/width:31em;word-break:keep-all;           /* 不换行 */white-space:nowrap;          /* 不换行 */overflo