当用户访问网页时(当页面没有足够的内容来触发滚动条的激活),需要什么CSS来使浏览器的垂直滚动条保持可见?
当前回答
html {height: 101%;}
我使用这个跨浏览器解决方案(注意:我总是在第一行使用DOCTYPE声明,我不知道它在quirksmode中是否有效,从未测试过)。
这将始终显示一个活跃的垂直滚动条在每一页,垂直滚动条将是可滚动的只有几个像素。
当页面内容短于浏览器的可见区域(视图端口),你仍然会看到垂直滚动条活动,它将是可滚动的只有几个像素。
如果你痴迷于CSS验证(我只痴迷于HTML验证),通过使用这个解决方案,你的CSS代码也将验证W3C,因为你没有使用非标准的CSS属性,如-moz-scrollbars-vertical
其他回答
在过去的几年里,情况发生了变化。以上答案不再适用于所有情况。苹果正在到处推广消失滚动条。Safari, Chrome甚至是MacOs(和iOs)上的Firefox在实际滚动时只显示滚动条-我不知道当前的Windows/IE。然而,Webkit上有一些非标准的方法来设置滚动条的样式(IE很久以前就放弃了)。
html {height: 101%;}
我使用这个跨浏览器解决方案(注意:我总是在第一行使用DOCTYPE声明,我不知道它在quirksmode中是否有效,从未测试过)。
这将始终显示一个活跃的垂直滚动条在每一页,垂直滚动条将是可滚动的只有几个像素。
当页面内容短于浏览器的可见区域(视图端口),你仍然会看到垂直滚动条活动,它将是可滚动的只有几个像素。
如果你痴迷于CSS验证(我只痴迷于HTML验证),通过使用这个解决方案,你的CSS代码也将验证W3C,因为你没有使用非标准的CSS属性,如-moz-scrollbars-vertical
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
这使得滚动条始终可见,只在需要时才活动。
更新:如果以上不工作,那么只是使用这个可能。
html {
overflow-y:scroll;
}
身体{身高:101%;}将“裁剪”较大的页面。
相反,我使用:
body { min-height:101%; }
html { height:initial!important; }
你可能不需要!important -这取决于使用的是什么CSS。
推荐文章
- 如何指定一个元素后包装在css flexbox?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?
- 用CSS截断长字符串:可行吗?
- 重要的样式
- 灰色的图像与CSS?
- CSS中*和*|*的区别是什么?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- CSS高度:100% vs高度:auto
- 复选框输入是否只在被选中时才发布数据?
- 带引导的固定宽度按钮
- 是类型="文本/css"必须在<链接>标签?
- 在没有jQuery的情况下,防止悬停父div的子元素时onmouseout
- 英语字母表中哪个字母占像素最多?
- 如何将LaTeX与Markdown混合?