3

结合我发现的两个例子：

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

当我看到进来的第一个答案缺少我的问题的重点时，我添加了这张图片以使问题更清楚。

在此处输入图像描述

4

15 回答 15

6

实际上，我会做不同的事情。

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

这是演示

唯一的缩减是您必须按特定顺序构建 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>

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

于 2013-10-07T08:23:28.533 回答
2

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

js小提琴可以在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;
    }
于 2013-10-10T12:05:46.937 回答
2

可能的解决方案：演示

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

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

调整列的宽度。

于 2013-10-07T08:31:16.197 回答
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>
于 2013-10-15T07:35:56.507 回答
1

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

FIDDLE（小内容）

小提琴（很多内容）

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

相关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;
}
于 2013-10-09T11:23:17.280 回答
0

您可以通过使用以下函数来实现这一点.. 并在 body onload 上调用它

<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);
}
于 2013-10-16T06:07:32.873 回答
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 **/
}

希望能帮助到你。

于 2013-10-14T20:18:50.163 回答
0

I edited your fiddle and just added a height field to the left, right, and center fields of the css portion. The number can be arbitrarily large and it should work for all display sizes. Definitely simpler than all the other solutions.

Edit: The background of the right, middle, and left will only go as far as the text itself without specifying the height. 100% height changes nothing, it only works to override a parent element with a different specified height (such as if a pixel height had been defined for all paragraph tags, but you want the background of one to cover all of the text and only the text, you would use ). To change the height to be the whole page, either the arbitrarily large height or another solution would be needed, but this is the reason it isn't working. 100% height makes it as if height had not been mentioned before. (this is based on my small amount of experience with one browser, not all solutions will work for all broswers)

于 2013-10-16T13:48:12.917 回答
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);

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

于 2013-10-15T19:07:06.443 回答
0

最简单的解决方案：应用高度：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%;
    }
于 2013-10-10T10:59:49.703 回答
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解决方案要好得多，使用干净的代码始终是更好的解决方案

于 2013-10-07T08:48:52.907 回答
0

这样做：

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

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

于 2014-03-12T12:12:51.637 回答
0

如前所述，它可以与“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;
  }
于 2013-10-15T14:53:02.273 回答
0

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

height:900px;

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

overflow:scroll; or overflow:auto;
于 2013-10-14T11:27:21.337 回答
0

见演示

我已经更改了一些 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>
于 2013-10-09T09:08:26.013 回答