2

多年来第一次用 CSS 胡思乱想，我有一种讨厌的感觉，我把自己逼到了一个角落。

我用这个创建了一个 3 列浮动布局：

* {
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}

    #wrapper {
        width: 960px;
        background: silver;
        margin: 0 auto;
    }

#column-left {
    width: 240px;
    float: left;
    background: #f4d2d4;
    padding-top: 36px;
}

#column-center {
    margin-top: 41px;
    margin-left: 34px;
    margin-right: 34px;
    width: 492px;
    float: left;
    background: white;
}

#column-right {
    width: 160px;
    float: left;
    background: white;
    margin-top: 49px;
}

如您所见，左侧列具有彩色背景。但它不会延伸到页面底部，只是为了覆盖内容。我需要它一直向下伸展。

切换到绝对位置或固定位置会破坏 3 列布局。使用 height: 100% 必须一直回到身体，这完全搞砸了一切。有没有简单的方法来解决这个问题？

4

2 回答 2

9

Dan Cederholm 有一个很好的方法，可以使用“仿柱”技术使其看起来像柱子延伸。我不会重新编写它，而是将其链接在这里：

http://www.alistapart.com/articles/fauxcolumns/

如果您决定使用流畅的布局，Chris Coyier 还写了一篇关于不同人解决此问题的方法的文章：

http://css-tricks.com/fluid-width-equal-height-columns/

于 2012-11-09T17:42:02.923 回答
1

添加height:100%到body和html您的列。

于 2012-11-09T17:11:22.940 回答