A WordPress specific way to "stretch" (min height) the content of my pages so th

  • lawpress

    (@lawpress)


    9 years, 8 months ago

    A WordPress specific way to “stretch” (min height) the content of my pages so that there are no whitespaces after my footers?

    I have basic coding experience. In my WordPress install, some of my pages have a blank whitespace under the footer because there is not enough content to push it to the bottom of the monitor at higher resolutions. The problem is persistent on chrome, Firefox, IE etc. I would like to fix this so that:

    1. If the content is shorter than the browser resolution, the “body” will fill the page until the footer is at bottom of the screen with no blank whitespaces after or before it.

    2. No matter what the browser resolution is there will be no whitespaces after the footer, so im trying to refrain from code that will use a determined “px” number.

    3. I want the footer to be displayed in a traditional ‘bottom’ of the page way and NOT a sticky footer that always remains at the bottom of the screen no matter how far you scroll, as seen here

    As I am working in WordPress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS and an answer that acknowledges a WordPress specific fix. I have tried several solutions but to no avail. I have been suggested to use Ryan Fiat”s Sticky Footer solution but I’m unsure of how I would incorporate that into my WordPress as wordpress uses PHP and I mainly edit with custom CSS.

    Heres a Fiddle of my footer PHP.

    Q. Please provide me with a clear and direct solution for WordPress that will make sure there are no whitespaces below the footers on my site when the content is shorter than the browser.

    You can find an example of the whitespaces on my website here

    Solutions i’ve tried:

    1. #footer {overflow: hidden;} in the custom CSS didn’t work.

    2. Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my custom css but that didn’t work.

    3. #copyright { padding-bottom: 20px;} “#copyright” is under the footer so this did reduce the whitespace to a point where it seemed it weren’t present, but on taller browser windows the white space reappeared.

    4. Solutions like this are not WordPress specific.

    5. “div-wrapper, body” solutions like ** Ryan Fiat’s seem to have positive responses, but again, I cant find a WordPress specific one.

    Answer from those that have experience with WordPress are greatly appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • janet4now

    (@janet4now)

    9 years, 8 months ago

    You can try this: https://wordpress.org/plugins/simple-sticky-footer/

    Lee

    (@romanempiredesign)

    9 years, 8 months ago

    How does this work for you?

    http://jsfiddle.net/2bjyrxx1/3/

    The footer here will always be at the bottom with no white space.

    Alternatively if you’d just like the footer to stick to the bottom of content and not window, you can do this:

    http://jsfiddle.net/a6prd6bj/1/

    The idea in that one is to have your background color the same as your footer background color.

    Also, this is not really a WordPress specific problem, even though you specified you’d like a WordPress specific answer. It’s just CSS and someone else mentioned you need javascript for this, but you don’t. Just CSS will do the trick if you do it right. Unless there is something I’m missing. You don’t have to overcomplicate this.

    Hope it works for you. Cheers!

    RossMitchell

    (@rossmitchell)

    9 years, 8 months ago

    Your solution will need javascript.
    At both page load, and also at page resize, the javascript will fetch the viewport height, subtract the height of header/footer/navigtion etc, and set the height of your content item.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘A WordPress specific way to "stretch" (min height) the content of my pages so th’ is closed to new replies.