css - 如何制作 100% 高度的分栏

Question

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

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

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

Answer 1

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

Answer 2

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

我只是在容器中添加了一个背景（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 浏览器将退回到单列显示。使用“背景：无”定位这些特定浏览器将确保背景不会显示在单列段落的中间。