Home/ Questions/Q 9104545
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T01:53:41+00:00

My page has the main content, a sticky footer and a right panel that

  • 0

My page has the main content, a sticky footer and a right panel that is absolutely positioned. I normally never use absolute positioning, but in this case I need the panel to overlap the main content when the browser window is thin. Currently it looks correct until I shrink my window too far vertically. When the content continues below the page break, the absolutely positioned div no longer meets the footer. How can I ensure that the absolutely positioned div is always long enough to meet the footer so there is no gap?

Here’s the HTML:

<body>
    <div id="abs"></div>
    <div class="wrapper">
        <p>Website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
    </div>
</body>

And the CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}   
.footer {
    background-color:#333;
    position:relative;
    z-index:40;
}   
#abs {
    position:absolute;
    right:0;
    top:0;
    z-index: 20;
    background-color:#579ECF;
    width:100px;
    min-height: 100%;
}
p {
    width:700px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You absolutely position abs in the body tag. For reasons I won’t go into body is the height of the window, not of the content. So when you set it to 100% it is only as tall as the screen.

    Instead move the abs div into the main content div, set main content to relative, and specify top: 0 and bottom: 0 to stretch abs out.

    http://jsfiddle.net/3jegZ/

    .wrapper {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}  
#abs {
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 20;
    background-color:#579ECF;
    width:100px;
}
    • 0