内容宽度为100％，显示水平滚动条

debugcn 发表于 Dev

哈里·塞缪尔（Harry Samuels）

我一直在寻找与此类似的问题，但其他问题中规定的修复均不适用于我的情况。基本上，我的身体宽度设置为100％，并且在任何其他div中都没有填充或边距，但是我在底部仍然有一个奇怪的水平滚动条，在布局的右边有大约50px的空白。它应该在红线在这里停止：

在此处输入图片说明

我已经绞尽脑汁，在这里提出了问题，但不知道发生了什么。将非常感谢您的建议。相关CSS：

body, html {
color: #000000;
font-family: 'Open Sans', sans-serif;
font-size:12pt;
background:#f2f2f2;
padding:0;
margin:0;
height:100%;
border:0;
/* overflow:hidden; */
}

#menubar {
position:absolute;
top:0px;
background:#FDBB30;
height:80px;
width:100%;
font-weight:bold;
}

#content {
position:absolute;
top:80px;
width:92%;
left:50px;
background:#ffffff;
height:calc(100% - 80px);
}

编辑：测试页面中的HTML：

<body>
<div id="container">
<div id="menubar"><?php require 'menubar.php'; ?></div>
<div id="content">
<h1>Avis libertatis volebit semper</h1>
<h2>avis libertatis volebit semper</h2>
<p>avis libertatis volebit semper</p>
</div>
</div>
</body>

链接

您使用width: 92%和left: 50px。

窗口宽度大约为600px时，内容将为600*0.92= 552pxwidth。加上的左侧位置，50px总宽度为602px。窗口宽度越大。

因此，不要使用left: 50px，而要使用left: 4%

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。