Question

所以我有两个div。一个左侧div带有导航链接，一个右侧div填充内容，具体取决于您在左侧单击的链接。我想在导航和分隔两者的内容之间有一条垂直灰线，但我需要根据右侧内容div的长度来改变高度。（并且如果右侧不像导航那么长，则默认情况下将线条移至导航栏的底部。）

因此，如果用户点击链接使得正确的内容div真的很长，我需要垂直线来动态地改变它的高度并一直向下，但如果内容不像导航那么长仍然需要它一直到导航结束。

我正在尝试边框和高度的事情：100％但我无法通过跨浏览器工作。（IE和FF）谢谢！

Answer 1

假设您的左侧导航div具有固定高度，或者高度不会经常变化。假设您的左侧导航div的高度为400px。然后：

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

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

请注意，IE6不支持“min-height”。

Answer 2

父div的重复背景图像，垂直灰线适当定位将是您最好的选择。

Answer 3

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

Answer 4

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

我如何做到这一点的一个例子，您可以在this website上看到。

Answer 5

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

示例：

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>

希望这有帮助！

Answer 6

这个问题的答案可能会对你有所帮助：

Extending sidebar down page

Answer 7

你可以在右边的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>

两个div之间的垂直线间隔

7 个答案: