3列css布局与粘性页脚 - 列100％高度？

时间：2013-10-07 08:08:05

标签： html css sticky-footer

结合我发现的两个例子：

http://alistapart.com/article/holygrail

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

我想出了这个布局。

http://jsfiddle.net/xVuh5/

这很棒，但我希望3列高100％。

有人可以帮忙吗？

谢谢

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

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

正如我所看到的第一个答案错过了我的问题所在，我正在添加此图片以使问题更加清晰。

enter image description here

15 个答案:

答案 0 :(得分：6)

实际上，我会采用不同的方式。

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

列宽可以是固定的，也可以不是......你会的。

答案 1 :(得分：2)

可能的解决方案：DEMO

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

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

调整列的宽度。

答案 2 :(得分：2)

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

js小提琴可以在http://jsfiddle.net/6RQES/1/

找到

HTML code：

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

答案 3 :(得分：1)

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

<强> FIDDLE (Little content)

<强> FIDDLE (Lots of content)

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

相关CSS 

#container
{
    display:table;
    width: 100%;
    height: 100%;
    margin: -30px 0 -100px;
    padding: 30px 0 100px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#container .column {
    display: table-cell;
}

答案 4 :(得分：1)

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

答案 5 :(得分：0)

您的增强型代码：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解决方案要好得多，使用干净的代码总是更好的解决方案

答案 6 :(得分：0)

请参阅DEMO

我已经更改了一些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>

答案 7 :(得分：0)

最简单的解决方案：将 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%;
    }

答案 8 :(得分：0)

在高处需要设置最小高度，另一种方法就是保持

height:900px;

像这样（静态高度）为全高，并用

保持它的CSS 
overflow:scroll; or overflow:auto;

答案 9 :(得分：0)

只是为了简单。

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

希望它有所帮助。

答案 10 :(得分：0)

如前所述，它适用于“display：table;”：JSFiddle

但浮动：左边不允许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;
  }

答案 11 :(得分：0)

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

所以，我认为这将是最好的

答案 12 :(得分：0)

  

您可以使用以下功能实现此目的..并将其调用   身体上载

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

现在添加以下函数并在html中添加JQuery Library。

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

答案 13 :(得分：0)

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

编辑：右侧，中间和左侧的背景只会在没有指定高度的情况下直到文本本身。 100％高度不会改变任何东西，它只能覆盖具有不同指定高度的父元素（例如，如果已为所有段落标记定义了像素高度，但您希望背景为1覆盖所有文本而仅覆盖所有文本文字，你会用）。要将高度更改为整个页面，可能需要任意大的高度或其他解决方案，但这就是它无法工作的原因。 100％的高度使得它好像以前没有提到高度。 （这是基于我使用一个浏览器的小经验，并非所有解决方案都适用于所有broswers）

答案 14 :(得分：0)

就这样做：

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

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

相关问题
最新问题