0

I'm trying to fill the rest of my content, before my footer. I've found many pages here with solutions that seem logical but don't seem to work within my page. I cant change my position status of my footer to fixed or absolute. I currently have a div with the id of "bottomfix". I tried the fixed & zerod solution but that didn't work either.

I invite you view my biopage, the css that I'm working on is the last sheet titled style.css.

newby JP
  • 59
  • 8
  • This can not be done with CSS only. You need JS. If you don't care about the div's size and just want the footer to stick to the bottom, google "CSS sticky footer" or something similar. – Wouter Florijn Jun 08 '15 at 22:29
  • **Duplicated** see the solution here http://stackoverflow.com/questions/18915550/fix-footer-to-bottom-of-page – solimanware Jun 08 '15 at 22:32
  • @WouterFlorijn you can use the CSS3 property `calc` I believe – zgood Jun 08 '15 at 22:37
  • @zgood That would only work if you know the exact height of ALL other content on the page. Even if you do, it's bad practice to rely on exact sizes in CSS. – Wouter Florijn Jun 08 '15 at 22:48
  • @WouterFlorijn You just need to know the heights of the `
    ` and `
    ` for it to work in this case. But I do agree this only works if the header and footer have a static height. But thats what the `calc` function is for so use it if you can!
     – zgood Jun 08 '15 at 22:54
  • Ok my first comment was only partially true. It can be done using flexbox for some layouts. I posted my answer below. – Wouter Florijn Jun 08 '15 at 23:20

5 Answers5

1

Add to your #footer class position: fixed; then add position bottom: 0px; and it will be at the bottom

#footer {
    border-width: 5px;
    bottom: 0;
    padding: 6px 0 7px;
    position: fixed;
    width: 100%;
}

if you want footer to bi fixed to the bottom of the page only if your page doesn't have enough content to fill in page then add this script before <body> closing tag

<script type="text/javascript">
if(jQuery('header:first').height()+
   jQuery('main:first').height()+ jQuery('footer:first').height() >  jQuery(window).height()){ 
   $('#footer').css({position: 'fixed', bottom: '0px'});
}
</script>

and this scrip will on load check if your page needs fixed footer :)

or you can add it in

$(document).ready(function(){

  //code

});
Senad Meškin
  • 13,597
  • 4
  • 37
  • 55
  • This is not an option for my overall design. If you visit my homepage you will see why. – newby JP Jun 08 '15 at 22:32
  • so you don't need it at the bottom if there is content that can cover whole page?, only if there is empty space? – Senad Meškin Jun 08 '15 at 22:36
  • @newby JP: I don't see why this or an absolute with bottom: 0; won't work? While this isn't pretty, since you have so many nested elements, set a min height of 100% on your html and body. You can then use absolute with a bottom:0. – laughingpine Jun 08 '15 at 22:36
  • yes it does "work" but the whole point of the design is that the landing page, is a clean UN-obstructed image. – newby JP Jun 08 '15 at 22:40
  • @Senad that last addition looks great! i'm to add that script before which closing tag? – newby JP Jun 08 '15 at 22:47
  • added the script just above the `

    ` and it doesnt seem to do its job :( it seems like just the right fix too

     – newby JP Jun 08 '15 at 22:58
  • then use solution number 2 it should do the job, it's hard like this to test it, but I think it will work. – Senad Meškin Jun 08 '15 at 23:01
  • I think i'm a little un familiar with your technique on how to use that style of code. From what i understand, I would place `$(document).ready(function(){ if(jQuery('header:first').height()+ jQuery('main:first').height()+ jQuery('footer:first').height() > jQuery(window).height()){ $('#footer').css({position: 'fixed', bottom: '0px'}); } });` before the `

    `

     – newby JP Jun 08 '15 at 23:14
1

A way to do this, which I think would work for your layout, is using flexbox. I actually did this for one of my own projects (example). This is the best solution, since your footer and other content can have dynamic height.

General HTML structure:

<body>
  <main>
    Header and page content go here...
  </main>
  <footer>
    Footer...
  </footer>
</body>

It's important to include many different prefixes and fallbacks to make it work in all browsers (I tested it in multiple versions of Chrome, FF, IE and Safari).

CSS:

body {
  display: box;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  min-height: 100vh;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}

main {
  -webkit-box-flex: 1 1 auto;
  -moz-box-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

footer {
  margin-top: 32px; // Whatever space you want between content and footer.
  -webkit-box-flex: 0 1 auto;
  -moz-box-flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

If you want to control the size of your .bottomfix div, you can add more flexboxes into the main element.

Wouter Florijn
  • 2,711
  • 2
  • 23
  • 38
0

You can try using the the CSS3 calc function. Like this:

main{
    min-height: 100%; /*fallback if browser doesn't support calc*/
    min-height: ~"calc(100% - 330px)"; /*330px comes from 270px <header> plus 60px <footer>*/
}

You would just have to replace the <header> and <footer> height value calculation to yours.

Also make sure you have something like this:

html, body{
    height:100%;
}
zgood
  • 12,181
  • 2
  • 25
  • 26
0
#footer {
  border-top: 1px solid #000;
  background: #222;
  color: #7B7B7B;
  font-size: 13px;
  position: absolute;
  z-index: 100;
  clear: both;
  padding: 10px 0;
  bottom: 0;
}

This worked for me I set the position to absolute and set bottom:0; to force the div to the bottom of the browser

Mark
  • 564
  • 4
  • 12
0

Just try this. 66px is footer + header height

html, body, #page, #bottomfix, main > div {
    height: 100%;
}

main {
    height: calc(100% - 66px);
}

example

iamandrewluca
  • 3,411
  • 1
  • 31
  • 38
  • @zgood I tried your example, but for me min-height does not work – iamandrewluca Jun 08 '15 at 23:03
  • Thats odd, I'm using that code in couple live projects and it seems to be working. Oh well, the point is using `calc` which prevents the need for any extra javascript you need to maintain. Good solution ;) – zgood Jun 08 '15 at 23:08
  • works great on the bio page, but it strips out my content on my home page – newby JP Jun 08 '15 at 23:08
  • you want in case if is more content, the footer to go down? you can't always fit all in one page, and have a "sticky" footer without scrollbar ) – iamandrewluca Jun 08 '15 at 23:11
  • i dont fully understand your question – newby JP Jun 08 '15 at 23:12
  • you want that footer always to be visible, doesn't matter how much content is in page? if yes, the solution is to make footer fixed. – iamandrewluca Jun 09 '15 at 07:24