平板电脑或浏览器上出现的空白区域调整大小

时间:2013-08-15 21:13:19

标签: html css

在我目前的项目中,我正在构建网站的平板电脑和移动版本,我正在浏览器中以不同的尺寸对其进行测试,但是在调整浏览器大小时遇到​​了问题。

该网站的当前版本位于:http://demo1.zenithtechnosol.net/simlim/html/

请测试一下:http://responsivetest.net/#u=http://demo1.zenithtechnosol.net/simlim/html/|768|1024

基本上每当我调整浏览器的大小以检查它在平板电脑上的显示效果时,即使没有超出包含元素的宽度,也会在右侧呈现空白区域并显示x滚动条。

我可以通过添加overflow:hidden来解决这个问题,但这会完全禁用x滚动,这是我不想要的。

我已经在所有主流浏览器中对此进行了测试,所有浏览器的响应都是一样的,所以它必须与CSS有关,究竟我不太确定,但它可能非常简单,我已经设法错过了。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

您可能希望将.pad-20 {padding:20px}更改为.pad-20 {padding:20px 0},当然会从overflow-y:scroll; overflow-x:hidden中移除body