我有两个div,左侧div包含导航链接,右侧div根据左侧的链接点击情况填充内容。我希望在导航和内容之间有一条垂直的灰色分隔线,但是需要根据右侧内容div的高度动态改变其高度。(如果右侧不如导航长,则默认将该线延伸到导航底部)
如果用户点击了一个使右侧内容div非常长的链接,我需要这条垂直线动态地改变其高度并延伸到底部,但如果内容不如导航长,则仍然需要将其延伸到导航底部。
我尝试使用边框和height:100%,但无法在跨浏览器(IE和FF)中实现任何效果。谢谢!
假设您的左侧导航div具有固定高度,或者高度不经常更改。我们假设您的左侧导航div高度为400px。那么:
div.leftnav {
height: 400px;
float: left;
}
div.rightContent {
min-height: 400px;
border-left: 1px solid gray;
float:left;
}
请记住,"min-height"不受IE6的支持。
对于父div,使用重复的背景图片并适当地定位垂直灰线是最好的选择。
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>
希望这能帮到你!
我曾经通过在y轴上重复使用背景图像来解决这个问题。只需将其创建为页面宽度,不要太高,可能是10-20像素。然后向下重复即可。有点作弊的感觉,但在某些情况下确实有效:p
我做过的一个例子可以在这个网站上看到。
你可以在右侧的 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>