当用户访问网页时(当页面没有足够的内容来触发滚动条的激活),需要什么CSS来使浏览器的垂直滚动条保持可见?
当前回答
html {height: 101%;}
我使用这个跨浏览器解决方案(注意:我总是在第一行使用DOCTYPE声明,我不知道它在quirksmode中是否有效,从未测试过)。
这将始终显示一个活跃的垂直滚动条在每一页,垂直滚动条将是可滚动的只有几个像素。
当页面内容短于浏览器的可见区域(视图端口),你仍然会看到垂直滚动条活动,它将是可滚动的只有几个像素。
如果你痴迷于CSS验证(我只痴迷于HTML验证),通过使用这个解决方案,你的CSS代码也将验证W3C,因为你没有使用非标准的CSS属性,如-moz-scrollbars-vertical
其他回答
html {
overflow-y: scroll;
}
这是你想要的吗?
不幸的是,当应用于HTML或BODY时,Opera 9.64似乎忽略了CSS声明,尽管它适用于其他块级元素,如DIV。
我可以通过将它添加到body标签来让它工作。对我来说更好,因为html元素上没有任何东西。
body {
overflow-y: scroll;
}
body {
min-height: 101vh;
}
这对我来说是最好的
在过去的几年里,情况发生了变化。以上答案不再适用于所有情况。苹果正在到处推广消失滚动条。Safari, Chrome甚至是MacOs(和iOs)上的Firefox在实际滚动时只显示滚动条-我不知道当前的Windows/IE。然而,Webkit上有一些非标准的方法来设置滚动条的样式(IE很久以前就放弃了)。
身体{身高:101%;}将“裁剪”较大的页面。
相反,我使用:
body { min-height:101%; }
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?