两个div之间的垂直线间隔符

Question

我有两个div，左侧div包含导航链接，右侧div根据左侧的链接点击情况填充内容。我希望在导航和内容之间有一条垂直的灰色分隔线，但是需要根据右侧内容div的高度动态改变其高度。（如果右侧不如导航长，则默认将该线延伸到导航底部）

如果用户点击了一个使右侧内容div非常长的链接，我需要这条垂直线动态地改变其高度并延伸到底部，但如果内容不如导航长，则仍然需要将其延伸到导航底部。

我尝试使用边框和height:100%，但无法在跨浏览器（IE和FF）中实现任何效果。谢谢！

- Mike

Answer 1

假设您的左侧导航div具有固定高度，或者高度不经常更改。我们假设您的左侧导航div高度为400px。那么：

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

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

请记住，"min-height"不受IE6的支持。

- Jin

Answer 2

对于父div，使用重复的背景图片并适当地定位垂直灰线是最好的选择。

- da5id

---

同意。如果右侧内容更长，则固定高度的解决方案将无法使用。对于父元素，使用重复的背景图像会更好。 - Baer

Answer 3

您可以让导航 div 右侧有一个边框，内容 div 左侧也有一个边框。让这两个边框重叠应该会产生所需的效果。

- tobbez

---

这听起来像是最简单的解决方案，只需给其中一个div添加负边距，宽度为边框的宽度。 - jeroen

我同意，这比重复的背景图片更优雅的解决方案。 - bellkev

Answer 4

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

例如：

CSS

div.vert-line{overflow:hidden}
div.vert-line>div+div{border-left:#color;}
div.vert-line>div{width:200px; float:left; padding-bottom:2000px; margin-bottom:-2000px;}

HTML

<div class="vert-line>
  <div>Left Side</div>
  <div>Right Side</div>
</div>

希望这能帮到你！

- rkingon

---

http://jsfiddle.net/epeleg/VKqEU/1/ 显示了这个，但如何使其在分隔符上下有一些空间呢？ - epeleg

Answer 5

我曾经通过在y轴上重复使用背景图像来解决这个问题。只需将其创建为页面宽度，不要太高，可能是10-20像素。然后向下重复即可。有点作弊的感觉，但在某些情况下确实有效:p

我做过的一个例子可以在这个网站上看到。

- Svish

---

看起来我们在（大致）同一时间有了相同的想法！我不认为这是作弊，而且在某些方面，这就是 Web 开发的全部意义（即寻找“侧面解决方案”）。 - da5id

Answer 6

你可以在右侧的 div 上使用 CSS 的 border-left。

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

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

- Kofi Sammie

Answer 7

这个问题的答案可能会对你有所帮助： 扩展侧边栏到页面底部

- Temple