带有粘性页脚的 3 列 css 布局 - 列 100% 高度？答案

【问题标题】：3 column css layout with sticky footer - columns 100% height?带有粘性页脚的 3 列 css 布局 - 列 100% 高度？
【发布时间】：2013-10-13 17:29:07
【问题描述】：

结合我发现的两个例子：

http://alistapart.com/article/holygrail

http://mystrd.at/modern-clean-css-sticky-footer/

我想出了这个布局。

http://jsfiddle.net/xVuh5/

这很好，但我希望 3 列的高度为 100%。

有人可以帮忙吗？

谢谢

SO 编辑器验证要求在文本中包含 jsfiddle 的 html 和 css 脚本正文：

<div id="header">This is the header.</div>

<div id="container">

    <div id="center" class="column">
        <h1>This is the main content.</h1>
        <p>Text Text</p>
    </div>

</div>

<div id="footer">This is the footer.</div>

    /*** The Essential Code ***/
    * /* For CSS Reset */ 
    { 
        padding: 0; 
        margin: 0; 
    } 

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
        margin: 0 0 100px; /* bottom = footer height */
    }

    html, body {
        height: 100%;
        width: 100%;
    }

    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
    }

    #container .column {
        position: relative;
        float: left;
    }

    #center {
        padding: 10px 20px;       /* CC padding */
        width: 100%;
    }

    #left {
        width: 180px;             /* LC width */
        padding: 0 10px;          /* LC padding */
        right: 240px;             /* LC fullwidth + CC padding */
        margin-left: -100%;
    }

    #right {
        width: 130px;             /* RC width */
        padding: 0 10px;          /* RC padding */
        margin-right: -100%;
    }

    #footer {
        clear: both;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
    }

    /*** IE Fix ***/
    * html #left {
        left: 150px;              /* RC fullwidth */
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        padding-top: 1em;
        text-align: justify;
    }

当我看到第一个答案没有抓住我的问题的重点时，我添加了这张图片以使问题更清楚。

【问题讨论】：

附带说明，您正在使用 HTML5，然后请不要犹豫使用可用元素：<header>、<section>、<footer>、<aside>...
回答此问题的人应提供 jsfiddles，以便我们可以看到您的解决方案有效
你在使用 JQuery 吗？

标签： html css sticky-footer

【解决方案1】：

就这样做吧：

.col{
   display:block;
   height:100%;
}

它很简单，它很快，它是 css。

【讨论】：

【解决方案2】：

我编辑了您的小提琴，只是在 css 部分的左侧、右侧和中心字段中添加了一个高度字段。该数字可以任意大，它应该适用于所有显示尺寸。绝对比所有其他解决方案都简单。

编辑：右侧、中间和左侧的背景将仅与文本本身一样远，而无需指定高度。 100% 高度没有任何改变，它只适用于覆盖具有不同指定高度的父元素（例如，如果为所有段落标签定义了像素高度，但您希望一个的背景覆盖所有文本，并且只有文本，您将使用 )。要将高度更改为整个页面，需要任意大的高度或其他解决方案，但这就是它不起作用的原因。 100% 的高度使它看起来好像之前没有提到高度。（这是基于我对一个浏览器的少量经验，并非所有解决方案都适用于所有浏览器）

【讨论】：

【解决方案3】：

为了简单。

HTML：

<div class='section'>
    data
</div>
<div class='section'>
    data
</div>
<div class='section'>
    data
</div>

CSS：

html, body { height: 100%; } /** Will not work without it because until and unless the height of the parent divs are not 00% the children could not have the height 100% aswell. **/

.section {
    width: calc(100%/3); /** To make the width of all the divs same **/
    height: 100%; /** Obivo, making their height to 100% **/
    display: inline-block;
}

.footer {
    position: absolute; /** To enable **bottom** property to work :P **/
    bottom: 0; /** To stick it to the bottom **/
}

希望对你有帮助。

【讨论】：

试过了。如果没有 float:left; 的部分，这是行不通的。你还漏掉了页脚

【解决方案4】：

在高度的地方你需要设置最小高度，其他的方法就是保持

height:900px;

像这样（静态高度）为全高并保持它的css与

overflow:scroll; or overflow:auto;

【讨论】：

【解决方案5】：

您可以通过使用以下函数来实现这一点.. 并调用它正文加载

<body onload="height()"></body>

现在添加以下函数并在您的 html 中添加 JQuery 库。

function height()
{
var ele = document.getElementById('container');
$(ele).css("height", window.innerHeight - 100);
var height = $(ele).css("height");
$("#left").css("height",20+height);
$("#center").css("height",height);$("#right").css("height",20+height);
}

【讨论】：

【解决方案6】：

您可以通过使用 Jquery 来实现您的目标：

var height = $(window).height();   // returns height of browser viewport or use next line
var height = $(document).height(); // returns height of HTML document , just use what u need, not both.

然后：

$('.cols').height(height);

所以，我认为这是最好的

【讨论】：

为什么要设置同一个变量两次？
嘿，不要反对我！你读过第一行代码上的 cmets 吗？我看到有一个 OR ，不是吗？所以请让我离开投票者并阅读之前的所有代码行。 @b_dubb
编辑以更好地理解@b_dubb
OP 并没有要求 JavaScript 解决方案，更不用说 jQuery
你无聊吗，伙计？我只是提供一个解决方案，一个简单而清晰的解决方案。只是这个。来吧，删除不投票的人。顺便说一句是最快的。 @b_dubb

【解决方案7】：

如前所述，它将与“display: table;”一起使用：JSFiddle

但是 float:left 不允许 div-s 具有相同的高度。

    #container {
        display: table;
    }
    #container .column {
        position: relative;
        float: top;
    }
    #center {
        ...
        display: table-cell;
    }
    #left {
        ...
        display: table-cell;
    }
    #right {
        ...
        display: table-cell;
    }

还有div-s的顺序：

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

哦，我差点忘了让页眉和页脚浮动：

  #footer {
      ...
      position: fixed;
  }

【讨论】：

【解决方案8】：

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" bgcolor="#000066" colspan="3">fdsafdsa</td>
</tr>
<tr>
<td bgcolor="#666666" height="1000px" width="15%">fdsafdsasd</td>
<td bgcolor="#00CC00" height="1000px" width="70%">fdsafdsasd</td>
<td bgcolor="#990033" height="1000px" width="15%">fdsafdsasd</td>
</tr>
<tr><td colspan="3" bgcolor="#CCCC00">fdsafdsafds</td></tr>
</table>

【讨论】：

表格不适用于布局

【解决方案9】：

上述问题可以通过使用负边距和正填充的方法来解决。

js fiddle可以在http://jsfiddle.net/6RQES/1/找到

HTML 代码：

<div id="header">This is the header.</div>


    <div id="container">
    <div id="center" class="column">
        <h1>This is the main content.</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>

    <div id="left" class="column">
        <h2>This is the left sidebar.</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>

    <div id="right" class="column">
        <h2>This is the right sidebar.</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>
    </div>


<div id="footer">This is the footer.</div>

对应的样式有：

    /*** The Essential Code ***/
    * /* For CSS Reset */ 
    { 
        padding: 0; 
        margin: 0; 
    } 

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
        margin: 0 0 100px; /* bottom = footer height */
    }

    html, body {
        height: 100%;
        width: 100%;
    }
    #maincontainer{
        position:relative;
        min-height:100%;
        padding-bottom: 32px;
    }
    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
        overflow: hidden;
    }

    #container .column {
        position: relative;
        float: left;
        padding-bottom: 8000px;
        margin-bottom: -8000px;
    }

    #center {
        padding: 10px 20px;       /* CC padding */
        width: 100%;
    }

    #left {
        width: 180px;             /* LC width */
        padding: 0 10px;          /* LC padding */
        right: 240px;             /* LC fullwidth + CC padding */
        margin-left: -100%;
    }

    #right {
        width: 130px;             /* RC width */
        padding: 0 10px;          /* RC padding */
        margin-right: -100%;
    }

    #footer {
        clear: both;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }

    /*** IE Fix ***/
    * html #left {
        left: 150px;              /* RC fullwidth */
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        padding-top: 1em;
        text-align: justify;
    }

【讨论】：

【解决方案10】：

最简单的解决方案：将 height:100%; 应用于 #container .column 和 #container。我刚刚在你的 JSFiddle 中试了一下，它似乎工作正常。要点是，包含列的 div 也需要应用 100% 的高度。

所以这将是你的新 CSS：

    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
        height:100%;
    }

    #container .column {
        position: relative;
        float: left;
        height:100%;
    }

【讨论】：

【解决方案11】：

您可以使用css tables 来执行此操作。

FIDDLE (Little content)

FIDDLE (Lots of content)

（假设页眉高度为 30px，页脚高度为 100px）

纯 CSS 解决方案，完全响应，不固定任何高度（页眉或页脚）

这是Demo

唯一的缩减是您必须按特定顺序构建 HTML。（页脚在列之前）

<div class="Container">
    <div class="Header">
        <h1>Header</h1>
    </div>
    <div class="HeightTaker">
        <div class="Wrapper Container Inverse">
            <div>
                <div class="Footer">
                </div>
            </div>
            <div class="HeightTaker">
                <div class="Wrapper Content">
                    <div class="Table">
                        <div class="Column C1">
                        </div>
                        <div class="Column C2">
                        </div>
                        <div class="Column C3">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

列宽可能是固定的，也可能不是……随你的便。

【讨论】：

嗨 avrahamcool，感谢您的回答。在您的解决方案中，我看不到 3 列的高度为 100%。请查看我的问题中添加的图片。
@elector 你用的是什么浏览器？你能提供问题的img吗？因为它对我来说很好。它的 100%。在所有浏览器中。
应用了小改动 (min-height => height)。立即尝试。
这看起来不错，但它只是重新排列了很多元素。我在我的问题中的解决方案对我来说足够简单和清晰，我希望可以将列的高度应用于它。因为 3 列和粘性页脚看起来和工作良好并且易于实现。我的布局不只是一个补充吗？感谢您的回答。
@elector ，我认为这是你能想到的最好的布局......只需从我的解决方案中复制粘贴它，然后用你的内容填充适当的位置......如果你仍然不喜欢它..使用你在这里得到的其他答案之一..祝你好运。如果您喜欢它，请不要忘记支持并接受。

【解决方案14】：

您的增强代码：http://jsfiddle.net/xVuh5/6/
我改变了很多东西：

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        min-width: 630px;         
        margin: 0 0 100px;
    }

    html, body {
        height: 100%;
        width: 100%;
    }

    #container .column {
        position: absolute;
        float: left;
    }

    #center.column{
        position:relative;
        min-width:100px;
    }

    #center {
        padding: 10px 20px;
        width: 100%;
        margin-right:150px;
        margin-left:150px;
    }

    #left {
        width: 130px;
        padding: 0 10px;
        left: 0px;
    }

    #right {
        width: 130px; 
        padding: 0 10px;
        right:0px;
    }

    #footer {
        clear: both;
        margin-bottom: 0px;
        height: 100px;
        width: 100%;
    }

    /*** IE Fix ***/
    * html #left {
        left: 0px;
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        display:block;
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
        z-index:101;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        padding-top: 1em;
        text-align: justify;
    }

更新：avrahamcool 解决方案要好得多，使用干净的代码总是更好的解决方案

【讨论】：

列与页脚重叠（我正在检查 Chrome），感谢您的更新.. 哈哈
@avrahmcool 我没有看到任何错误，或者我根本不明白你的意思？如果右列或左列变长......底部必须更高，或者用户将如何看到它？事实上，即使在极少数情况下，主要内容也会比侧边栏更大编辑：你是找 4 个叉子还是 6 个？
确实如此，但另一列也应该增长。

【解决方案15】：

可能的解决方案：DEMO

我使用了包装类来调整高度。

.wrapper{
    height: auto !important;
    min-height: calc(100% - 60px);/* 100% - 30px header - 30px footer*/
}

调整列宽。

【讨论】：

如果您从左右侧边栏中删除文本，您会发现列的高度不是 100%

相关的 CSS

纯 CSS 解决方案，完全响应，不固定任何高度（页眉或页脚）