Align element to bottom of window but allow scrolling to content underneath

问题

I'm programming a jquery slider right now and I have the width set to 100% and I want it to align to the bottom of the window no matter how the window is resized. I have found ways to make it stick to the bottom the whole time you scroll down, but I do not want this. I want to be able to scroll below this slider to get to more content.

This website shows the kind of function that I am looking for. I tried to inspect it with firebug to find the part how it was happening but I couldnt figure it out.

http://pixelthemes.net/immersion/

Thanks for the help!

回答1:

You could achieve this simply by calculating the size and not aligning the gallery to the bottom.

var resize = function () {
    var availHeight = window.innerHeight;
    // you need to either calculate
    // or set a fixed offset from the top for content above
    var offset = 80;

    document.getElementById("slider").style.height = availHeight - offset + "px";
}

window.addEventListener("resize", resize, false);
window.addEventListener("load", resize, false);

Assuming that your slider has a 100% width, it should exactly do what you want. If your content above the slider is 80px heigh, it should exactly stick to the bottom of the window if it is scrolled all the way up.

来源：https://stackoverflow.com/questions/11455353/align-element-to-bottom-of-window-but-allow-scrolling-to-content-underneath