两个div之间的垂直线间隔

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在左边有一个边框.让这两个边界重叠应该产生预期的效果.