Question

好的，所以，在我的网站上，我有三个面板：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或以下版本不支持）。任何人都可以提供有关可能发生的事情的见解吗？谢谢！

Answer 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; 
}

Answer 2

首先，您必须使用#id一次，只能有一个#id。如果你想放几个，可以使用.classes。

然后我不明白我在jsFiddle上没有这个问题，我想知道这是否是您创建此栏的#cont1中使用的边缘。

您有一个页面向我们展示问题吗？

为什么CSS宽度：100％导致水平滚动？

2 个答案: