html - 确保较大 div 中两个 div 之间的线一直延伸到父 div 的底部

Question

我在一个较大的 div 中放置了两个 div。这两个 div 中的每一个都包含动态生成的内容，因此它们的高度各不相同，所以我不知道这两个中的哪个会更高。它们所在的父 div 有一个 1px 的边框，我想在这些 div 之间也有 1px 的线，这样这条线一直延伸到父 div 的底部，父 div 会根据子 div。这在下图中更容易理解:

我已经尝试将子 div 的高度设置为 100%，但这似乎不起作用。我怎样才能达到这个效果？ (这也需要在 IE6 中工作)

Answer 1

好吧，这相对容易，如果您想要的只是一个延伸到最高元素(在本例中是最高的 div)的整个高度的单个边框，尽管我的解决方案并不是真的解决潜在的等高问题(如果您希望每个 div 的 background-color 扩展到最高元素的全高。不过，它确实满足您的需求请求全高单边框:

  #left,
  #right {
    width: 40%; /* adjust to taste */
    float: left;
    padding: 1em; /* adjust to taste */
  }
  #left {
    border-right: 4px solid #000; /* adjust to taste */
  }
  #right {
    border-left: 4px solid #000;
    margin-left: -4px; /* the negative width of the border */
  }

JS Bin Demo .

---

编辑以解决我对问题的误解/误读。

这种方法有点 hack，但可以使用与上一个演示中相同的标记来实现，但 CSS 更复杂:

  #left,
  #right {
    width: 40%;
    float: left;
    padding: 1em;
  }
  #left {
    border-right: 4px solid #000;
  }
  #right {
    border-left: 4px solid #000;
    margin-left: -4px; /* the negative width of the border */
  }

  #right p,
  #left p {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin: 0;
    padding: 0 0.5em 1em 0.5em;
  }

  #right p:first-child,
  #left p:first-child {
    padding-top 1em;
    border-top: 1px solid #ccc;
  }

  #right p:last-child,
  #left p:last-child {
    border-bottom: 1px solid #ccc;
  }

Demo at JS Bin .

这不会是跨浏览器友好的，但是，IE(肯定)可能有问题，至少，:last-child 伪-选择器，因此在这种情况下，JavaScript 解决方案可能更适合您。尽管有一个更简单的选项来包装内部 div(在本例中为 #left 和 #right divs) 在另一个 div 中:

<div id="wrap">
    <div id="left">
        <div class="innerWrap">
            <!-- content -->
        </div>
    </div>
    <div id="right">
        <div class="innerWrap">
            <!-- content -->
        </div>
    </div>
</div>

可与css一起使用:

  #left,
  #right {
    width: 40%;
    float: left;
    padding: 1em;
  }
  #left {
    border-right: 4px solid #000;
  }
  #right {
    border-left: 4px solid #000;
    margin-left: -4px; /* the negative width of the border */
  }

  div.innerWrap {
    border: 1px solid #000;
  }

Demo at JS Bin

但是，虽然这对跨浏览器更友好，但它确实开始陷入疯狂，即 divitis .