position: absolute; bottom: 0; go to bottom of page

问题

How do I make an absolutely positioned element go to the bottom of the page?

I want to create a "cover" over my page. In order to make it cover the whole page, I used "position: absolute" with each of the four directions set to 0. However, when the height of the page content is greater than the height of the client window, the cover height is the client height, not the height of the full page.

JS Bin

<style>

#a {
    width: 100px;
    height: 2000px;
    background: red;
}

#b {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 200px;
    background: blue;
}

</style>

<div id=a></div>

<div id=b></div>

I first tried to diagnose this issues as an issue of <body></body> height. Most issues like this step from the fact that the <body></body> does not extend to the bottom of the page. However, you'll notice that in this example the body actually does extend 2000px to the bottom of the page.

Note that position: fixed does not work because the user should still be able to scroll and the content within the cover should scroll with the page.

回答1:

I figured it out!

You just needed the "containing block" of the element to be the body, so you just need to set <body></body> to be position: relative

回答2:

Use position:fixed to always cover the whole page.

回答3:

If you want to cover the full page just use position: fixed. That will keep the cover "fixed" to the viewport.

#cover {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

回答4:

The position:fixed does provide what you're looking for as you can see the contents are being scrolled down as you go. But what you're looking for, for the cover page to be over the entire height of the body without giving it a fixed height intitally, it can be only done through javascript.

#a {
  width: 100px;
  height: 2000px;
  background: red;
}

#b {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

<div id=a>
Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content   
</div>

<div id=b></div>

回答5:

If your <body> is the final height that you want and you don't know the constraints, then I would set a background-image and let the browser calculate it:

body {
  background-image: url(/your/path/to/image.jpg);
  background-size: cover; /* This line is the magic. It fits the image to the size of the container, in this case, <body> */
  background-position: center;
}

This method will cut off any overflow. You can get around this by using background-size: contain;, however if the dimensions don't match, you'll also want to set a background-color to be sure it matches the site.

来源：https://stackoverflow.com/questions/47759725/position-absolute-bottom-0-go-to-bottom-of-page

标签

css

absolute