0

现在我有一个 id 为"wrapper"的主 div ，在这个 div 中，我试图制作另外两个 div，它们占据了"wrapper"的整个宽度。第一个 div "sidebar"很窄，包含一些我想在"wrapper"最右侧显示的信息。我拥有的第二个内部 div 将使用 php 和 javascript 从用户插入的数据中动态更新，id 称为“maincontent”。

一开始我可以把它们放在“包装器”里面。当在“maincontent” div 中添加新内容时，问题就出现了。添加新内容时，“侧边栏” div 将与新添加内容的高度成比例地向下移动。

所以，我的问题是：

如何让两个内部 div 保持它们在页面顶部的位置，同时仍然能够动态向下扩展而没有任何移动？

4

2 回答 2

2

你需要float:left你的左内容：

见下面的CSS：

  .wrapper
  {
     margin:0;
     padding:0;
     top:10px;
     width:100%;
     height:500px;
     background-color:yellow;
  }
  .left-content
  {
     position:relative;
     width:20%;
     background-color:red;
     height:100%;
     float:left;
  }
  .main-content
  {
     position:relative;
     width:80%;
     left:20%;
     background-color:green;
     height:100%;

  }

您的 div 如下所示：

<body>
<div class="wrapper">
  <div class="left-content">
  </div>
  <div class="main-content">
  </div>
</div>
</body>

重要的是，您准确地将父容器的宽度划分为子容器

IEtotal width of child containers <= parent width

position看，当你为任何容器做的时候，你需要了解css-style 的属性position:relative，css 属性就像top, left,right,bottom开始为它们工作。

于 2013-03-03T07:52:53.923 回答
0

看看我的小提琴，Javascript 是完全没有必要的。让我知道它是否对您有帮助，或者如果您还有任何问题。最重要的部分是主要内容和侧边栏 都有float: left或同时存在。http://jsfiddle.net/y89zp/float: right

于 2013-03-03T07:58:23.717 回答