Html 带粘性页脚的3列css布局-列100%高？

结合我发现的两个例子：

我想出了这个布局

这是伟大的，但我想有3列100%的高度

有人能帮忙吗

多谢各位

SO编辑器验证在文本中包含JSFIDLE所要求的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>

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

---

事实上，我会用不同的方式来做

纯CSS解决方案，完全响应，无需固定任何高度（页眉或页脚） 这是我的建议

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

标题

列宽可以固定，也可以不固定。。给你的遗嘱。

可能的解决方案：

我使用包装器类来调整高度

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

调整列的宽度。

您的增强代码：
我改变了很多事情：

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

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

我已经改变了一些css的改变。看一看，希望对你有帮助

更新的CSS

<style>
    /*** 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 */
        display:table;
        height:100%;
    }

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

    #center {
        padding: 0 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;
    }
    </style>

/***基本准则***/
*/*用于CSS重置*/
{ 
填充：0；
保证金：0；
} 
html{
位置：相对位置；
最小高度：100%；
}
身体{
最小宽度：630px；/*2 x（LC全宽+CC填充）+RC全宽*/
边距：0 100px；/*底部=页脚高度*/
}
html，正文{
身高：100%；
宽度：100%；
}
#容器{
左侧填充：200px；/*LC全宽*/
右填充：190px；/*RC全宽+CC填充*/
显示：表格；
身高：100%；
}
#容器.列{
位置：相对位置；
浮动：左；
显示：表格；
身高：100%；
}
#居中{
填充：0 20px；/*CC填充*/
宽度：100%；
}
#左{
宽度：180px；/*LC宽度*/
填充：0 10px；/*LC填充*/
右：240px；/*LC全宽+CC填充*/
左边距：-100%；
}
#对{
宽度：130px；/*钢筋混凝土宽度*/
填充：0 10px；/*RC填充*/
保证金权利：-100%；
}
#页脚{
明确：两者皆有；
/*位置：绝对位置*/
左：0；
底部：0；
高度：100px；
宽度：100%；
}
/***修理工***/
*html#左{
左：150px；/*RC全宽*/
}
/***只是为了好看***/
身体{
保证金：0；
填充：0；
背景：#FFF；
}
#页眉，#页脚{
字体大小：大号；
文本对齐：居中；
填充：0.3em0；
背景：#999；
}
#左{
背景：#66F；
}
#居中{
背景：DDD；
}
#对{
背景：#F66；
}
#容器.列{
/*垫面：1米*/
文本对齐：对齐；
}

您可以使用它来执行此操作

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

相关CSS 最简单的解决方案：应用高度：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%;
    }

---

采用负余量和正填充法可以解决上述问题

js小提琴可以在

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>

---

在“高度”位置，您需要设置“最小高度”，而另一种方法只需保持

height:900px;

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

overflow:scroll; or overflow:auto;

简单地说

HTML:

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

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 **/
}

希望能有所帮助。

<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>

fdsafdsa
FDSAFDASD
FDSAFDASD
FDSAFDASD
fdsafdsafds

如前所述，它将与“display:table；”一起工作：

但是，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>

---

使用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);

所以，我认为这是最好的

您可以通过使用以下函数来实现这一点。。打电话 车身超载

---

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

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

只要这样做：

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

---

它很简单，很快，是css。

列与页脚重叠（我正在检查Chrome），感谢您的更新。。lol@avrahmcool

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

  #footer {
      ...
      position: fixed;
  }

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

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

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

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