Home/ Questions/Q 3840748
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T15:33:56+00:00

Title might be a bit confusing, I’ll try my best to explain what I

  • 0

Title might be a bit confusing, I’ll try my best to explain what I need to achieve. Basically I have the following elements to a particular webpage:

  1. Header – always visible above content
  2. Content – background image covers the entire content area – this is the key part
  3. Sub-footer – information about the content always visible below it
  4. Footer – standard company footer, visible if window height is a certain size, otherwise need to scroll down to see it

As I mention above, the content portion of the page is maybe the trickiest part. I need a big image to be in the background that covers the entire area. css-tricks has an excellent guide in the ways to do full page background images. So I’m hoping this can be achieved easily. The issue is how to make the sub-footer stay at the bottom if the window is <720px with the footer underneath it below the fold (needing you to scroll to it). A window >720px should show both the sub-footer and the footer with no scrollbars.

I won’t even worry at this point about a minimum height the content needs to be (possibly necessitating scrollbars on the content <div> or making both the sub-footer and footer go below the fold).

Here are image mockups of what I’m trying to achieve:

First – a window <720px tall where the footer needs to be scrolled to:
<720px tall window where the footer needs to be scrolled to

Second – a window <720px tall that has been scrolled down to see the footer:
enter image description here

Finally – a tall window >720px that has no scrollbars because everything is visible:
enter image description here

I’m using jQuery and don’t care about IE6. Can I achieve this in CSS? Do I have to use jQuery to dynamically adjust things? Full page backgrounds are easily done with css3, I’m happy to use css3 or html5 to do what I need.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You definitely can not use CSS position: fixed because that is always relative to the viewport, not the parent element.

    What you need to do is have the “subfooter” as a fixed positioned child element of “content”. In order to do that, you’re going to have to use Javascript.

    Something like this should do what you need. Try changing the height variable in the CSS for #content so you can see how it behaves with various content heights:

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<style>
    #header {
        height: 50px;
        background-color: #ccc;
        width: 100%;
        margin-bottom: 10px;
    }

    #content {
        position: relative;
        height: 1500px;
        width: 100%;
        background-color: #ccc;
    }

    #subfooter {
        height: 50px;
        width: 100%;
        background-color: #666;
        position: fixed;
    }

    #footer {
        height: 50px;
        width: 100%;
        margin-top: 10px;
        background-color: #ccc;
    }
</style>
<script>
    $(document).ready(function(){

        $(document).scroll(function() {
            position_subfooter();
        });

        var position_subfooter = function() {
            $("#subfooter").css("bottom", "20px");
            if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrollTop() + $("#content").height())) {
                $("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrollTop() + $("#content").height()) + 20));
            }
        }
        position_subfooter();
    });
</script>
</head>
<body>
    <div id="header">
        <h1>HEADER</h1>
    </div>
    <div id="content">

    </div>
    <div id="subfooter">
        <h2>SUB FOOTER</h1>
    </div>
    <div id="footer">
        <h1>FOOTER</h1>
    </div>
</body>
</html>
    • 0