Set the footer out of the shown content (#content height 100%)

Hey there!

I’m trying to set the height of the whole content (without the footer) to 100% height of the visible content (without scrolling), but it doesn’t work.

I read about this problem all over but i did not find a solution for it.
If i’m putting it like this it doesn’t work:

#content {
min-height: 100% !important;
}

If i’m adding:

html, body { height: 100% !important;}

…it doesn’t work either.

Do i really have to set the position-mode to “absolute” to reach my goal? I really have no clue right now how to get to this 100% height of the shown content.
Is there someone out there who can help me with this? I guess, it’s not a big thing to solve my problem, but i tried everything without success till now.

Thank you in advance!

(URL: wp.weyrauch.ch/news)

Hello there,

Thank you for asking.

Try the following code.

html,
body{
  overflow-x: hidden;
}

html,
body.page-id-1120,
body.page-id-1120 .site{
  position: relative;
  height: 100%;
  width: 100%;
}

body.page-id-1120 #content{ 
  width: 100%;
  height: 100%;
}  
  

Let us know how it works.

Regards,
Kharis

Hello Kharis!

Thank you so much for your reply! It works!! (almost perfectly)

But now, there is a second scrollbar (the existing one for the whole page plus the new one for just the content-area without the header). And i have to apply this code to all pages of my website. Is it possible to code it for all pages of my website at once, or do i have to apply it to all pages manually?

Thank you Kharis! I am really happy and so thankful for your help.

Kind regards
Simon

Hello there,

Thank you for updating me.

To apply globally, try the following.

html,
body{
  overflow-x: hidden;
}

html,
body,
.site{
  position: relative;
  height: 100%;
  width: 100%;
}

#content{ 
  width: 100%;
  height: 100%;
  overflow: hidden; /* Remove scroll */
}  
  

To remove the scrollbar, I added overflow: hidden; /* Remove scroll */

Let me know how it works. I’ll wait to hear back from you regarding your stats.

Hello Kharis

Thank you again for your reply. It is applied for all pages now. But there are still two problems:

  1. the scroll-bar seems to be behind the header.

  2. the footer should be under the whole content, if there is more content than 100% of one site. see the example here: http://wp.weyrauch.ch/our-shoes/lace-up/
    If you scroll down here you’ll find the footer laying over the content.

Update: i tried it with several different “positions” but it still doesn’t work. The footers behaviour is really strange. do i have to do everything with absolute positions? i’m quite confused right now… :confused:

I found an other problem: The “Go-Top-Button” disappeared. :confused:

Hello there,

Thank you for updating me.

I would like to apologize in advance for responding slowly.

I thought CSS isn’t reliable to achieve your objective. Try to use jQuery instead.

  1. Remove the previous CSS codes I suggested
  2. Install and activate the Header and Footer Scripts plugin
  3. Go to Settings > Header and Footer Scripts panel
  4. Paste the following code into the “Scripts in footer:”

<script>

(function($){

    "use strict";


    var windowHeight = $(window).height();
    var headHeight = $('.header-image').outerHeight();
    var newHeight = windowHeight - headHeight;
    var content = $('#content');

    if( matchMedia( 'only screen and (min-width: 992px)' ).matches ) {
      content.css({
        'min-height' : newHeight+'px'
      });
    }


})(jQuery);

</script>
  1. Save settings

You would need to clear your browser’s cache before reloading your site.

Let me know how it works. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis