Css 内容宽度100%显示水平滚动条_Css

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

css

Css 内容宽度100%显示水平滚动条,css,Css,我曾经寻找过类似的问题，但其他问题中规定的修复方法在我的案例中都不起作用。基本上，我的主体宽度设置为100%，在任何其他div中都没有填充或边距，但我仍然在底部有一个奇怪的水平滚动条，在布局右侧有大约50px的空白空间。它应该停在红线所在的位置：我绞尽脑汁想了想这里的问题，但不知道发生了什么。非常感谢您的建议。相关CSS： body, html { color: #000000; font-family: 'Open Sans', sans-serif; font-size:12pt; ba

我曾经寻找过类似的问题，但其他问题中规定的修复方法在我的案例中都不起作用。基本上，我的主体宽度设置为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>


自由之鸟
自由之鸟
自由之鸟

可能是您的浏览器为滚动条留出了空间吗？

您使用的是

宽度：92%

和

左侧：50px

窗口宽度约为600px时，内容将为

600*0.92

552px

宽度。将

50px

的左侧位置添加到它，总宽度为

602px

。哪个比你的窗户宽

因此，不要使用

left:50px

，而是使用

left:4%

修改CSS，如下所示：

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

请注意，行：

width:calc（100%-50px）。或者，您可以使用left:4%；宽度：92%（正如@LinkinTED所指出的）：两种解决方案都应该有效。我还建议您清理实际页面的HTML：它似乎与您的描述不一致
希望这会有所帮助。最诚挚的问候，
是否可以由50> x的空白空间引起？>左边：50px？这是我所想的，但我不知道我将如何补救它，也不知道为什么会出现滚动条。请将代码添加到一些小提琴中，请在你的问题中包含HTML部分。还有，这个“幻数”的宽度是多少：92%？致以最诚挚的问候，在这里摆弄：-不确定为什么它在那里工作，但不是在现实中否：问题仍然存在于Chrome和Firefox上。它可能在演示中工作，但在站点本身不工作：问题是。menulogo
。将left:10%
更改为padding left:10%
，它就会工作。天才！现在一切都很好-为什么会造成这样的问题？因为你把那个div放在了相对位置。它占据其父宽度的100%，然后放置在距离左侧10%的位置，总宽度为110%。您还可以将位置从相对更改为绝对。然后，它的宽度将与其内容相同。不幸的是，这仍然不能解决问题。那么div id=“container”是什么？您没有将其包含在CSS中。只需从HTML中删除它，看看它是否工作。致以最诚挚的问候，别忘了点击；CTRL+F5以清除缓存。也许会有帮助。你为什么以前不给我们看确切的页面？这和你描述的很不一样。还有很多其他因素，可能会对结果产生影响。另外，你似乎还有一个额外的。清理你的HTML，它将如演示中所示工作。顺致敬意，