为什么 CSS width:100% 会导致水平滚动？答案

【问题标题】：Why does CSS width:100% cause horizontal scrolling?为什么 CSS width:100% 会导致水平滚动？
【发布时间】：2013-07-22 14:13:20
【问题描述】：

好的，所以，在我的网站上，我有三个面板：cont1、cont2 和 cont3。以下是它们的 CSS 定义：

#cont1 { width:35%; position:fixed; background:#2583FE; right:0px; overflow:hidden; float:right; border:1px solid #0961D3; border-left:0px solid black; height:100%;}

#cont2 { height:69%; width:100%; overflow:auto;}

#cont3 { min-height:75px; width:100%; position:relative; display:block;}

现在，如果我按照以下方式实现它，只会出现一个垂直滚动条，我可以随意滚动我的内容：

<div id="cont1">
     <div id="cont3">First element</div>
     <div id="cont3">Second element</div>
     <div id="cont3">Third Element</div>
     <!--And so on-->
</div>

但是，如果我以这种方式实现它（我最终希望它工作的方式），水平滚动条会无缘无故地出现在 cont2 中：

<div id="cont1">
     <div id="cont2">
           <div id="cont3">First element</div>
           <div id="cont3">Second element</div>
           <div id="cont3">Third Element</div>
           <!--And so on-->
     </div>
</div>

通常，我只会放置overflow-x:hidden，但我试图让我的网站尽可能跨平台，并且我知道overflow-x 是一个CSS3 属性（IE8 或更低版本不支持）。任何人都可以提供有关可能发生的事情的见解吗？谢谢！

【问题讨论】：

我想 cont 2 正在被浏览器分配边距。试试设置margin: 0怎么还有cont2，好像是多余的。
问题不清楚，jsfiddle.net/5tQhA 似乎没问题
您没有任何可能导致总宽度大于可用宽度的填充或边距？ fiddle
先生。 Lister，我将每个 cont3 的边距设置为 10px，但即使没有边距，我仍然遇到同样的问题。

标签： css height width overflow

【解决方案1】：

.cont{
height: 30px;/**/
border-color: black;
/*position: relative;*/
position: fixed;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
border: none; 
}

【讨论】：

【解决方案2】：

首先，您必须使用一次#id，#id 只能使用一次。如果要放置多个，请使用.classes。

那我不明白我在jsFiddle上没有这个问题，不知道这是不是你创建这个栏的#cont1中使用的边缘。

您有一个页面可以实时向我们展示问题吗？

【讨论】：

这应该是一条评论。也会做出很好的评论。
我，对不起，我没有，但我相信问题没有在你的小提琴中重新创建的原因是因为我有太多的 cont3 元素，我跑过容器的高度。我在上面的代码中展示了三个作为示例。我其实有25个哈哈，但发现复制粘贴这么多次毫无意义。