两个div之间的垂直线间隔 [英] Vertical line spacer between two divs

问题描述

所以我有两个div。一个左边的导航链接和一个右边的div填充的内容取决于你点击左边的链接。我想在导航和内容之间有一个垂直的灰色线分隔两个，但我需要它根据右侧内容div的长度改变高度。 （如果右边的长度不如导航长度，默认情况下，该行会转到nav的底部）。

因此，如果用户点击在一个链接，使正确的内容div真的很长，我需要垂直线来动态改变它的高度，一路下降，但如果内容不像导航，我仍然需要它一路走

我正在尝试边框和高度的东西：100％，但我不能得到任何工作的跨浏览器。 （IE和FF）谢谢！

解决方案

假设您的左导航div具有固定高度，经常。让我们假设您的左导航div的高度为400像素。然后：

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

请记住，IE6不支持min-height / p>

So I have two divs. One left div with navigation links and one right div that populates with content depending on what link you click on the left. I would like to have a vertical gray line between the navigation and the content separating the two, but I need it to change in height depending on how long the right side content div is. (And also if the right side isn't as long as the navigation, have the line go to the bottom of the nav by default).

So if the user clicks on a link that makes the right content div really long, I need the vertical line to change its height dynamically and go all the way down, but if the content isn't as long as the nav i still need it to go all the way down to the end of the nav.

I was trying things with borders and height:100% but I couldn't get anything to work cross-browser. (IE and FF) Thanks!

解决方案

Assuming your left nav div has a fixed height, or a height that doesn't change often. Let's suppose your left nav div has a height of 400px. Then:

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

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

Keep in mind, "min-height" is not supported by IE6.

这篇关于两个div之间的垂直线间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！