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

时间:2013-08-16 21:09:35

标签: css layout

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); }

2 个答案:

答案 0 :(得分:1)

关于这一直存在一些问题和问题,并且有很多方法可以解决这个问题,但是最容易的,因为你使用绝对定位,它将“列”div包装在“center”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

答案 1 :(得分:0)

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

我已使用overflow: scroll;,因此您不会丢失内容(如果您想要或隐藏,您可以将其设置为仅Y)。 我还使用了height,因为min-height overflow没有触发

.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;
}