我有一个小问题，试图保持我的。html页面在Chrome上的宽度一致。
例如，我有一个页面(1)，其中有很多内容超出了视口的高度，因此该页面(1)上有一个垂直滚动条。在页面(2)上，我有相同的布局(菜单，div，…等)，但内容更少，所以没有垂直滚动条。
问题在于，在第(1)页上，滚动条似乎将元素稍微推到左边(增加宽度?)，而在第(2)页上，所有内容似乎都处于正中央。
我仍然是HTML/CSS/JS的初学者，我相信这并不难，但我没有运气找到解决方案。它在IE10和FireFox(无干扰滚动条)上都能正常工作，我只在Chrome上遇到过。
当前回答
我用这种方法解决了滚动条的类似问题:
首先禁用垂直滚动条设置它的:
overflow-y: hidden;
然后用固定的位置做一个div，高度等于屏幕高度，使它的宽度变薄，看起来像滚动条。这个div应该是垂直滚动的。现在在这个div中创建另一个与文档高度(包含所有内容)相同的div。现在你所需要做的就是给容器div添加一个onScroll函数，并在div滚动时滚动主体。代码如下:
HTML:
<div onscroll="OnScroll(this);" style="width:18px; height:100%; overflow-y: auto; position: fixed; top: 0; right: 0;">
<div id="ScrollDiv" style="width:28px; height:100%; overflow-y: auto;">
</div>
</div>
然后在页面加载事件中添加这个:
JS:
$( document ).ready(function() {
var body = document.body;
var html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
document.getElementById('ScrollDiv').style.height = height + 'px';
});
function OnScroll(Div) {
document.body.scrollTop = Div.scrollTop;
}
现在滚动div就像滚动body，而body没有滚动条。
其他回答
可能
html {
width: 100vw;
}
正是你想要的。
我用这种方法解决了滚动条的类似问题:
首先禁用垂直滚动条设置它的:
overflow-y: hidden;
然后用固定的位置做一个div，高度等于屏幕高度，使它的宽度变薄，看起来像滚动条。这个div应该是垂直滚动的。现在在这个div中创建另一个与文档高度(包含所有内容)相同的div。现在你所需要做的就是给容器div添加一个onScroll函数，并在div滚动时滚动主体。代码如下:
HTML:
<div onscroll="OnScroll(this);" style="width:18px; height:100%; overflow-y: auto; position: fixed; top: 0; right: 0;">
<div id="ScrollDiv" style="width:28px; height:100%; overflow-y: auto;">
</div>
</div>
然后在页面加载事件中添加这个:
JS:
$( document ).ready(function() {
var body = document.body;
var html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
document.getElementById('ScrollDiv').style.height = height + 'px';
});
function OnScroll(Div) {
document.body.scrollTop = Div.scrollTop;
}
现在滚动div就像滚动body，而body没有滚动条。
body {
width: calc( 100% );
max-width: calc( 100vw - 1em );
}
工作与默认滚动条以及。 可以添加:
overflow-x: hidden;
以确保水平滚动条对父帧保持隐藏。除非你的客户希望你这么做。
对于具有固定宽度的容器，纯CSS跨浏览器解决方案可以通过将容器包装到另一个div中并对两个div应用相同的宽度来实现。
#outer {
overflow-y: auto;
overflow-x: hidden;
/*
* width must be an absolute value otherwise the inner divs width must be set via
* javascript to the computed width of the parent container
*/
width: 200px;
}
#inner {
width: inherit;
}
点击这里查看Codepen的示例
你所需要做的就是添加:
html {
overflow-y: scroll;
}
在你的CSS文件中，无论是否需要，都会有滚动条，尽管你不能滚动。
这意味着两者的视口宽度相同。
