如何制作 100% 高度的分栏答案

【问题标题】：how to make 100% height column divider如何制作 100% 高度的分栏
【发布时间】：2012-05-14 21:17:42
【问题描述】：

好的，主要内容和侧边栏的基本设置，它们之间应该有细线。有没有办法用纯css制作？

<row>
<div span6>
<div span1 divider>
<div span5>
</row>

所以分隔线是一条细线，高度是 100%？我知道我可以在 jquery 中设置高度或者只是跳过它但只是想知道......

【问题讨论】：

相关部分（右侧）中没有任何内容可以解决您的问题？
你试过w3schools.com/tags/tag_hr.asp吗？
从未听说过<row> 元素。另外，细线怎么能有 100% 的高度？这是什么意思？
先制作正确的 HTML，你现在拥有的不是 HTML。
希望是伪代码 ;)

标签： css

【解决方案1】：

我也在寻找解决此问题的方法。我需要一个可以使用“列计数”实现的解决方案，并提出了以下解决方案。

我只是在容器中添加了一个背景（1px x 4px，尽管高度可以是大或小（1px 可以））到容器中。

我的容器代码（示例：）

<div class="column-two">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum tortor sit amet ultricies ornare. Integer eu interdum augue. Pellentesque quis semper neque. Duis enim nisl, posuere in sollicitudin id, euismod vel neque. Quisque id nisi cursus, laoreet ante ut, faucibus eros. Mauris orci massa, vestibulum at ante a, semper luctus nunc. Phasellus vel nisi condimentum, congue enim et, auctor elit. Vestibulum libero neque, aliquet eget dapibus quis, ullamcorper a orci.</p>

</div>

CSS 应用于我的容器：

div.column-two {
-moz-column-count: 2;
-moz-column-gap: 30px;
-webkit-column-count: 2;
-webkit-column-gap: 30px;
background:url('images/div-2column.png') center top repeat-y;
}

这将创建 2 列显示，其中背景图像创建视觉垂直分隔。对我有用！ :)

代码

（我还添加了以下内容，以确保列的高度相等。以下内容从初始段落中删除了填充）

div.column-two p:first-of-type { margin-top:0; }

请注意，旧的 IE 浏览器将退回到单列显示。使用“background:none”定位这些特定浏览器将确保背景不会显示在单列段落的中间。

【讨论】：

【解决方案2】：

我的意见 - 如果使用 border-left 没有固定高度（.row），则只有使用重复背景图像的可能性。（.row中的一些点和repeat-y）

【讨论】：

现在只是 div，懒惰的错字。我的意思是有 3 个 div，中间的一个应该与最长的左列或右列的高度相等