Question

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

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

在您之前建议使用Faux色谱柱或任何其他蹩脚的假柱拉伸解决方案时，谢谢，但这些解决方案根本不适用于此问题。我正在实施的设计建议在柱子和圆角上进行渐变，这将使人造柱不适用。这是世界上最容易横向拉伸的东西，为什么“垂直拉伸它们同样容易？” !! AARGH

我真的很感谢你那些聪明人的帮助。任何建议都没问题。如果它是建设性的，我甚至会欣赏关于伪垂直拉伸的良好讨论。

谢谢。

Answer 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>

仅使用CSS将元素拉伸到其容器的高度

1 个答案: