横向滚动桥

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

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

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

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

纵向滚动桥

设置固定高度

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

不设置固定高度

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

使用css3, vh视窗单位设置视窗高度.例如设置div为height:100vh代表, 这个div将占满整个屏幕可视高度，实际的场景一般不需要这样，另如通常div容器的适当高度为屏幕总高度减去导航栏的高度, 因此一般结合css3 calc来使用,例如
```
#container{ height:calc(100vh - 100px) }
```
实例:
使用max-height属性。备注：有时需求并不适合用max-height的方式。
```
#container{max-height:500px;
}
```
使用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

转载于:https://www.cnblogs.com/HappySky/p/7588297.html

All about Div内显示滚动桥相关推荐

css 实现div内显示一行、两行或三行，超出部分用省略号显示
一.div内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二.div内显示两行或三行, ...
css 实现div内显示固定三行，超出部分用省略号显示
css 实现div内显示两行或三行,超出部分用省略号显示一.div内显示一行,超出部分用省略号显示 white-space: nowrap;overflow: hidden;text-overflo ...
关于div的滚动条滚动到底部，内容显示不全的问题。（已解决）
关于div的滚动条滚动到底部,内容显示不全的问题.(已解决) 参考文章: (1)关于div的滚动条滚动到底部,内容显示不全的问题.(已解决) (2)https://www.cnblogs.com/th ...
CSS div内文字溢出部分隐藏显示...省略号
div内文字溢出部分隐藏显示-省略号单行溢出显示省略号: overflow: hidden; white-space: nowrap;//内容超出不换行 text-overflow: ellipsi ...
css div横屏超长滚动,CSS实现DIV超长截断，并显示...
DIV显示内容有时会超长,并把页面撑的很难看, 以前的做法是在JS中,或者后台判断其长度,过长就截断, 但由于中英文数字展示的宽度并不一样,截断的长度也就只能取最小值, 展示的效果也不好.利用CSS提 ...
div中内嵌并排div的显示问题
在页面布局中,最常使用的就是div标签,经常会出现div中内嵌div的情形,这时,子div的排列就相当重要.下面推荐两种方式. ** 1. 当需要两个div并排显示,并拥有同一个父div时: ** & ...
css实现div盒子内显示两行或三行，超出部分用省略号显示
1.div盒子内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 2.div盒子显示两行或 ...
h5页面实现固定div内滚动
h5页面实现固定div内滚动实现方法: 注意: 因为h5页面没有scroll-view这样的组件,这里使用css实现滚动, 父元素flex布局,高度100%,页面从上到下正常铺,需要实现滚动的div ...
在html中加入滚动条,html在div中显示滚动条
基本思路:滚动条要添加到内容部分的父标签上(div),内容部分不设置大小,父标签要明确设置大小,并且父标签要添加overflow样式,并设置成auto. 打开的效果如下: 这时可能有人会问,父div的 ...

All about Div内显示滚动桥