0

If you go to my website: website you see the top black line that's the header. The bottom black line is the footer. The middle section is the content , in side the content I did columns. Now what I am trying to do is make the footer sticky to the bottom of the page without the scroller to appear. Then I am trying to make the columns go down to the footer. But not by changing the min height to higher. I want the columns to always go do to the footer. So that the column background will be all the way down to the footer.

Here is the pic of what i need picture

Here is my css and html

html,body {
height:100%;}
body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
margin:0;
font-size: 15px;
font-weight: 400;
line-height: 157%;
color: #666666;
padding:0;

}
.content {
min-height: 0;
background-color: #9E959E;
height: calc(100% - 50px); /* add this */ }

.footer {
min-height: 25px;
margin-left: auto;
margin-right: auto;
background-color:#000000;
clear: both;
position:fixed;
right:0px;
left:0px;
bottom:0px;
}

.header {
min-height:300px;
background-color:#000000;
}
@media only screen and (min-width : 768px) {
.header {
    min-height: 25px;
}
}
@media only screen and (min-width : 992px) {
.header {
    min-height: 25px;
}
}



<body>
<div class="header">
</div>  <div class="content">
<div class="page-content">
<div class="column_4"></div>
<div class="column_5"></div>
<div class="column_6"></div>
<div class="column_7"></div>
</div>  </div>
<div class="footer">
</div>      <div style="display:none">
</div></body>
lightswitch05
  • 9,058
  • 7
  • 52
  • 75
user1727251
  • 11
  • 8
  • please remove the jquery tag and just do a search on SO for the answer first - I have found 15 answers just by typing 'full height column' into the search box – GrahamTheDev Feb 23 '15 at 18:50
  • i did for a full day yesterday and i can get none to work right. – user1727251 Feb 23 '15 at 19:03
  • sigh - people really do not want to read - add `height: 100%` to .page-content and for each column add `height: 100%` - it would be easier to give all columns a class of 'fullHeight' and then write a separate class - you are using classes like Ids – GrahamTheDev Feb 23 '15 at 19:09
  • i tried the do that in .content and in content child but still no luck. – user1727251 Feb 23 '15 at 19:23
  • Quick question, how is this a Wordpress problem? – ggdx Feb 23 '15 at 19:37
  • i did this template in WP Builder. its not a wordpress problem , its wordpress related. – user1727251 Feb 23 '15 at 20:33

1 Answers1

0

I found this CSS in your website: http://bravocreations.com/wp/wp-content/themes/WordPress-Site7/page.css?ver=4.1.1

You might want to consider changing the height properties to e.g. 100% from those 600px and 700px

You might also want to install FireBug, so you can find CSS responsible for such issues quickly

as the code is quite lenghty I put it on the pastebin

http://pastebin.com/LMPZ4Hjy

redCodeAlert
  • 603
  • 2
  • 7
  • 18