Question

我已经找到了与此类似的问题，但其他问题中规定的修复都没有在我的案例中起作用。基本上，我的身体宽度设置为100％，并且我在任何其他div中没有填充或边距，但我仍然在底部有一个奇怪的水平滚动条，在布局的右边有大约50px的空白区域。它应该停在红线所在的位置：

enter image description here

绞尽脑汁想在这里解决问题，但不知道发生了什么。非常感谢您的建议。相关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>

Answer 1

可能是你的浏览器允许空间滚动条？

Answer 2

您使用left: 50px和600*0.92。

窗口宽度约为600px时，内容宽度为552px = 50px。将602px的左侧位置添加到其中，总宽度为left: 50px。窗口宽度哪个更宽。

因此，不要使用left: 4%，而是使用let image = UIImage(named: "image.png")

DEMO

Answer 3

修改您的CSS，如下所示：

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

请注意该行：width:calc (100%-50px);。或者，你可以使用左：4％;和宽度：92％（正如@LinkinTED所指出的）：两种解决方案都应该有效。我还建议您清理实际页面HTML：它似乎与您的描述不一致。

希望这会有所帮助。最好的问候，

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

3 个答案: