1

考虑以下小提琴：http: //jsfiddle.net/dts2T/

这已经困扰了我很长一段时间了。这个小提琴中的 Javascript 应该是多余的。但是我在谷歌上搜索了一下我的头发：我怎样才能只使用 CSS 做同样的事情？

问题在于三列中的任何一列都可能包含多个子级。首先，我需要将每个 .column 容器拉伸到 #bottom div 的高度。然后我需要拉伸每个 .column 中最后一个元素的高度，以便它填充其容器的剩余空间。但是如何？

在你们中的任何人建议假列或任何其他蹩脚的假列拉伸解决方案之前，谢谢，但这样的解决方案根本不适用于这个问题。我正在实施的设计建议在柱子和圆角上使用渐变，这将使人造柱子不适用。水平拉伸是世界上最简单的事情，为什么垂直拉伸也同样容易？！啊！！

我真的很感谢你们这些聪明人的帮助。任何建议都可以。如果有建设性的话，我什至会很感激关于假装垂直拉伸的好讨论。

谢谢你。

4

1 回答 1

1

这是很多人不时遇到的一个令人头疼的问题。

您可以将部分设置为display: table;，将列设置为display: table-cell;。甚至边界半径和任何花哨的东西都可以在上面工作。

这是一个工作演示：http: //jsfiddle.net/MadLittleMods/QykYu/

这里还有 HTML 和 CSS：

CSS：

.container
{
    display: table;
    width: 100%;
    border: 2px solid #000000;
}
.column
{
    display: table-cell;   
    border: 1px solid #ff0000;  

    border-radius: 10px;        
}

HTML：

<section class="container">
    <div class="column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
    <div class="column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
        </ul>
    </div>
    <div class="column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li> 
            <li>Item 8</li>
            <li>Item 9</li>
            <li>Item 10</li>
            <li>Item 11</li>
            <li>Item 12</li>
            <li>Item 13</li>
            <li>Item 14</li>
        </ul>
    </div>
</section>

​</p>

​</p>

于 2012-10-13T02:21:21.140 回答