Html 两个div之间的垂直线间隔器

所以我有两个div。一个左div包含导航链接，另一个右div包含内容，具体取决于您在左侧单击的链接。我想有一个垂直的灰色线之间的导航和内容分隔这两个，但我需要它的高度变化取决于多长的右侧内容div。（而且，如果右侧没有导航的长度长，则默认情况下，将线路移至导航的底部）

因此，如果用户单击的链接使正确的内容div非常长，我需要垂直线动态地改变其高度并一直向下移动，但是如果内容没有导航长，我仍然需要它一直向下移动到导航的末端

---

我尝试了边界和高度方面的东西：100%但我无法通过浏览器获得任何东西。谢谢

假设您的左导航div有一个固定的高度，或者一个不经常变化的高度。让我们假设您的左导航div的高度为400px。然后：

div.leftnav {
   height: 400px;
   float: left;
}

div.rightContent {
   min-height: 400px;
   border-left: 1px solid gray;
   float:left;
}

---

请记住，“最小高度”不受IE6支持。

您最好为父div重复背景图像，并适当放置垂直灰线。

此问题的答案可能会帮助您：

---

我曾经通过在y轴上重新绘制背景图像来解决这个问题。只需将其创建为与页面一样宽，而不是非常高，可能是10-20像素。然后向下重复。也许有点作弊，但在某些情况下是有效的：p

---

您可以在上看到我是如何操作的一个示例。

您可以让导航div在右侧有一个边框，而内容div在左侧有一个边框。让这两个边界重叠应该会产生预期的效果。

我这样做的方法是将元素放入一个容器div中，并隐藏溢出。然后对所有重复的div应用左边框。然后，在所有浮动子元素上设置css属性：padding bottom:2000px；边际-底部-2000px

例如：

CSS

HTML

---

您可以使用右边div上的css
左边框

.vertical_line { border-left: 1px solid #f2f2f2; }

<div>
  <p>first div</p>
</div>
<div class="vertical_line">
  <p>second div</p>
</div>

.vertical_line{左边框：1px实心#f2f2；}
第一组

第二组

看起来我们（大致）在同一时间有着相同的想法！顺便说一句，我不认为这是作弊，而且在某些方面，web开发的全部内容（即找到“横向解决方案”）听起来像是最简单的解决方案，只需给其中一个div一个负边距，即边框的宽度。我同意，这是一个比重复背景图像更优雅的解决方案。同意。如果正确的内容较长，则固定高度解决方案将不起作用。为父对象重复背景图像会更好。显示这一点，并添加了详细信息，但如何使其在sperator上方和下方有一些空间？
<div class="vert-line>
  <div>Left Side</div>
  <div>Right Side</div>
</div>

.vertical_line { border-left: 1px solid #f2f2f2; }

<div>
  <p>first div</p>
</div>
<div class="vertical_line">
  <p>second div</p>
</div>