Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 7, 2015 at 1:49 pm #499217
    richardwilding

    Dear Kriesi,

    What would be the best way to have a boxed layout that always extends to the full height of the browser. I’d prefer not to have the background colour show under the white content box on pages with shorter content (example below)

    Is there a way to do this by adding a footer that always sticks to the browser bottom?

    Thanks, Richard

    September 7, 2015 at 3:49 pm #499302
    Yigit

    Hey Richard!

    You can enable footer socket and then add following code to Quick CSS 

    #socket { position: fixed; width: 100%; bottom: 0; }

    Best regards,
    Yigit

    September 7, 2015 at 4:25 pm #499343
    richardwilding

    Thanks Yigit,

    This doesn’t seem to be working correctly. Could you take another look.

    Best w, Richard

    September 8, 2015 at 5:30 am #499653
    Ismael

    Hi!

    You can apply a minimum height to the main container:

    .html_boxed #main {
    min-height: 900px;
}

    Use css media queries to adjust the height on different screen sizes.

    Best regards,
    Ismael

    September 8, 2015 at 12:24 pm #499784
    richardwilding

    Thanks Ismael,

    Unfortunately this is really not working. With this min height on the box, the footer now moves up and down, leaving white space underneath.

    Could you take another look (link below)

    Best wishes,
    Richard

    September 9, 2015 at 9:35 am #500253
    Ismael

    Hey!

    Did you remove the previous suggested code? Please remove it then test the page again.

    Regards,
    Ismael

    September 9, 2015 at 12:53 pm #500348
    richardwilding

    Yes, I already removed the following code:

    #socket { position: fixed; width: 100%; bottom: 0; }

    The problem is that now the white box is always min height 900px, which is good, but the footer does not sit at the bottom, it moves up and down under content.

    Thanks, Richard

    September 11, 2015 at 11:22 am #501534
    Andy

    Hey!

    you can control position of your footer with this code:

    footer#socket {
top: 50px;
}

    adjust as needed.

    Cheers!
    Andy

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.