css - CSS - 列与页面底部对齐，但随着滚动内容而增长。

Question

http://jsfiddle.net/yLhh3/

我在一个非常简单的 CSS 布局中有三列。在将内容添加到其中一个之前，它们看起来很完美，从而迫使页面滚动（在小提琴上向下滚动）。

我想要的只是让红色框始终进入页面底部（而不是窗口/屏幕，页面）。这如何用 CSS 来实现？

.column
{
    background-color: red;
    width: 400px;

    /* Page height minus header */
    min-height: calc(100% - 192px);

    /* Align to bottom of the page */
    position: absolute;
    top: 192px; 
}

/* Half the page width minus (1.5 columns + offset between columns) */
.left { left: calc(50% - 630px); }
.right { right: calc(50% - 630px); }

/* Half the page width minus 0.5 columns */
.center { left: calc(50% - 200px); }

Answer 1

对此一直存在问题和疑问，并且有很多方法可以解决，但最简单的方法是，由于您使用绝对定位，它将“列”div 包装在“中心”div 内。

<div class="column center">
    <div class="column right"></div>
    <div class="column left"></div>
</div>

这允许左右 div 伸展到父级中心的 100%。正如您在小提琴中看到的那样，对 css 进行了一些小的更改，例如height: 100%和top: 0对于包含的列，因为父顶部被认为是 0 对于孩子。

jsfiddle

Answer 2

我希望我能理解你想要达到的目标。

我已经使用过overflow: scroll;，因此您不会丢失内容（如果需要或隐藏，您可以将其设置为仅 Y）。我也用过，height因为没有触发min-heightoverflow

.column
{
    background-color: red;
    width: 400px;

    /* Page height minus header */
    height: calc(100% - 192px);

    /* Align to bottom of the page */
    position: absolute;
    top: 192px;
    overflow: scroll;
}