height to 100% in CSS

Question

I have a 3 column site. The left and right side, if i put height: 100% it only fills up to the end of the content in that column. I would like for it to go all the way down to the footer. Thus not leaving an open space between the column and the footer.

added, http://jsfiddle.net/3vm2t/1/

CSS

/* RIGHT COLUMN */
#rightcolumn{
float: left;
width: 20%; /*Width of right column in pixels*/
min-width: 200px;
height: 100%;
margin-left: -20%; /*Set margin to that of -(RightColumnWidth)*/
background: #5f5f5f;
color: White;
}

/* LEFT COLUMN */
#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
min-width: 200px;
height: 100%;
margin-left: -100%;
background: #5f5f5f;
color: White;
}

also in case its needed

body{
margin:0;
padding:0;
line-height: 1.5em;
color: black;
height: 100%;
}

/*TOPSECTION */
#topsection{
background: url('../images/bannerBGbkup.jpg'), url('../images/bannerBGl.jpg');
background-position: left top, left top;
background-repeat: no-repeat, repeat;
height: 200px; /*Height of top section*/
color: White;
text-align:center;
min-width: 950px;
}

/* middle collumn */
#contentwrapper{
float: left;
width: 100%;
min-width: 1000px;
background: #919191;
}

#contentcolumn{
margin: 0 20% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

I tried to explain what i am talking about but still kind of new to css/html but if more info is needed please let me know. Not sure if you would need any html code? but if so ill update. Thanks

Show your html and you can put a [fiddle](http://jsfiddle.net/) to make us to understand the issue easier. — Krish, Aug 09 '12 at 11:00
added, http://jsfiddle.net/3vm2t/1/ also not sure why the left and right side float in once screen is small.. but thats another question .. This one you will notice the bottom gap between footer and collumns i would like for it to be all the way down. no matter what content is in the collumns. — Glen Morse, Aug 12 '12 at 06:25
this threat can solve your problem [100-min-heigh](http://stackoverflow.com/questions/25238/100-min-height-css-layout) — Iliya Reyzis, Aug 12 '12 at 08:13
i have tried that `min-height:100%;` but it will only give 100% height of content. — Glen Morse, Aug 12 '12 at 08:24

score 1 · Accepted Answer · answered Aug 12 '12 at 08:25

1

I think you should use the table html layout for what you want to do.

You can put your columns in a <table>, but the cleanest way I think is to use the display: table-cell CSS property.

I took the liberty of editing your HTML/CSS content : http://jsfiddle.net/TxeJu/

Moved the "content" block between left and right blocks, added display: table-cell property, and removed the table you put in the "content" block.

answered Aug 12 '12 at 08:25

Marc MAURICE

1,571
1
11
9

This worked great. not sure i did it exactly as you said, as i had to add a few other things like put a table after the contentwarpper but anyhow it seems to be working. brought a few other issues. like my right collumn is not as wide as left collumn now but should be an easy fix. and a few other things. but anyhow Thanks! – Glen Morse Aug 12 '12 at 09:13

Patt Mehta · Answer 2 · 2012-08-12T09:52:59.043

<html>
 <head>
  <style type="text/css">
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, ol, ul,
    li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
     font-family:Segoe UI, sans-serif;
    }
   .header, .container, .footer {
    min-height:100px;
   }
   .header {
    background-color:#757575;
   }
   .container {
       background-color:#cccccc;
   }
   .footer {
    background-color:#757575;   
   }
   .header, .footer, .column {
    text-align:center;
   }
   .column {
    float:left;
    min-width:300px;
    border-left:1px solid blue;
    border-right:1px solid blue;
    margin-left:10px;
   }
  </style>
  <script type="text/javascript">
   function headerContentFooter(headerRatio, footerRatio) {
    totalHeight = document.height;
    headerHeight = 0;
    containerHeight = 0;
    footerHeight = 0;
    if(headerRatio < 0.5 && footerRatio < 0.5) {
     headerHeight = totalHeight * headerRatio;
     footerHeight = totalHeight * footerRatio;
     containerHeight = totalHeight - (headerHeight + footerHeight);
     document.getElementsByClassName("header")[0].style.height = "" + headerHeight + "px";
     document.getElementsByClassName("container")[0].style.height = "" + containerHeight + "px";
     document.getElementsByClassName("footer")[0].style.height = "" + footerHeight + "px";
     document.getElementsByClassName("header")[0].style.minHeight = "" + headerHeight + "px";
     document.getElementsByClassName("container")[0].style.minHeight = "" + containerHeight + "px";
     document.getElementsByClassName("footer")[0].style.minHeight = "" + footerHeight + "px";
     document.getElementsByClassName("header")[0].style.maxHeight = "" + headerHeight + "px";
     document.getElementsByClassName("container")[0].style.maxHeight = "" + containerHeight + "px";
     document.getElementsByClassName("footer")[0].style.maxHeight = "" + footerHeight + "px";
    }
   }
  </script>
 </head>
 <body>
  <div class="header">HEADER</div>
  <div class="container">
   <div class="column">LEFT</div><div class="column">CENTER</div><div class="column">RIGHT</div>
  </div>
  <div class="footer">FOOTER</div>
  <script type="text/javascript">
   headerContentFooter(0.05, 0.05);
  </script>
 </body>
</html>

Hi, I know that the above code is not an answer to your question because your profile shows you are probably not the javascript guy, but sometimes css is not enough, you should try to exploit huge strengths of modern browsers, but if you have less time, we can help you. Please do try the above code, because it works well

going to give it a try. I heard js might fix my issue before but did not know how.. — Glen Morse, Aug 12 '12 at 10:00
gave it a try and i get same results. The left and right side only show height of what it contains. here is an image http://hostmypicture.com/?v=example.jpg using firefox , also what i did was just add your script js at top and then add the call to it just above end of body. am i missing anything? — Glen Morse, Aug 12 '12 at 10:09
yeah this does not work on firefox wait few minutes I am searching this, even on opera — Patt Mehta, Aug 12 '12 at 10:13
http://stackoverflow.com/questions/11817450/rotation-about-local-z-axis, I am searching for your question but do see this — Patt Mehta, Aug 12 '12 at 10:20
just a basic question on rotation about local z-axis, the logic is fine but the values are rushing — Patt Mehta, Aug 12 '12 at 10:26

height to 100% in CSS

2 Answers2