【问题标题】:Columns reaching the same bottom, without the same top列到达相同的底部,但没有相同的顶部
【发布时间】:2012-05-17 18:26:36
【问题描述】:

我正在处理一个有点挑战的设计。

该网站需要使用粘性页脚和完整等长的列。我一直在用背景图片欺骗其他页面,但是我有一些麻烦的页面在左栏中有一个标题。

标题下方有一个间隙,显示背景图像,因此我降低背景图像是不可行的。

Here is a JSfiddle with a lot of the essential mark up in place. 我已经包含了粘性页脚,并在 CSS 中对其进行了分段,因为该解决方案必须与粘性页脚一起使用。

【问题讨论】:

    标签: html css layout sticky-footer


    【解决方案1】:

    您可以为此使用Display:table 属性。像这样写:

    #columns{
        width:90%;
        display:table;
    }
    .column{
        border: 1px dotted blue;
        display:table-cell;
    }
    

    查看http://jsfiddle.net/4rY8h/2/

    但它不适用于 IE7 及以下版本。

    【讨论】:

    • 对不起,应该更清楚。我还需要将列与页脚保持一致。
    猜你喜欢
    • 2015-06-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-14
    • 2015-11-11
    • 1970-01-01
    相关资源
    最近更新 更多