问题
With combining two examples I've found:
http://alistapart.com/article/holygrail
http://mystrd.at/modern-clean-css-sticky-footer/
I have come up with this layout.
http://jsfiddle.net/xVuh5/
And it is great but I would like to have the 3 columns 100% height.
Can anyone help please?
Thank you
Body of the html and css script as asked by the SO editor validation for including jsfiddle in the text:
<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;
}
As I see the first answers coming in are missing the point of my question, I am adding this image to make the question clearer.
回答1:
Actually, I would do it differently.
Pure CSS solution, Totally responsive, Without fixing any height (header or footer)
Here's the Demo
The only downsize, is that you have to build your HTML in a certain order. (Footer comes before the columns)
<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>
The column width may be fixed, or not.. to you're will.
回答2:
Probable solution: DEMO
I have used wrapper class to adjust height.
.wrapper{
height: auto !important;
min-height: calc(100% - 60px);/* 100% - 30px header - 30px footer*/
}
adjust width of columns.
回答3:
The above problem can be solved by applying negative margin and positive padding method.
The js fiddle can be found at 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 corresponding styles are:
/*** 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;
}
回答4:
You could use css tables to do this.
FIDDLE (Little content)
FIDDLE (Lots of content)
(Assuming header height of 30px and footer height of 100px)
Relevant 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;
}
回答5:
<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>
回答6:
your enhanced code: http://jsfiddle.net/xVuh5/6/
I have changed many thing:
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;
}
UPDATE: avrahamcool solution is much much better, useing a clean code is always a better solution
回答7:
See DEMO
I have change some css changes. Have a look hope it will help you
updated 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>
回答8:
Easiest solution: apply height:100%; to both #container .column and also to #container. I just gave it a shot in your JSFiddle and it seemed to work fine. Main point being, that the div containing the columns also needs 100% height applied.
So this would be your new CSS:
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
height:100%;
}
#container .column {
position: relative;
float: left;
height:100%;
}
回答9:
As mentioned it would work with "display: table;": JSFiddle
However float:left won't allow div-s to be the same height.
#container {
display: table;
}
#container .column {
position: relative;
float: top;
}
#center {
...
display: table-cell;
}
#left {
...
display: table-cell;
}
#right {
...
display: table-cell;
}
And the order of div-s:
<div id="left" class="column">
</div>
<div id="center" class="column">
</div>
<div id="right" class="column">
</div>
Oh and I almost forgot to make header and footer to float:
#footer {
...
position: fixed;
}
回答10:
You could achieve your goal by using 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.
then :
$('.cols').height(height);
So, I think this would be the best
回答11:
You can achieve this by using the following function.. And call it on body onload
<body onload="height()"></body>
Now add the following function and add JQuery Library in your html.
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);
}
回答12:
At the place of height you need to set min-height and the other method just keep
height:900px;
like this (static height)for full height and keep it's css with
overflow:scroll; or overflow:auto;
回答13:
Just to be simple.
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 **/
}
Hope it helps.
回答14:
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)
回答15:
Just do that :
.col{
display:block;
height:100%;
}
It's Simple, it's fast, it's css.
来源：https://stackoverflow.com/questions/19219792/3-column-css-layout-with-sticky-footer-columns-100-height