Align all content with the bottom of the page?

Question

I\'m trying to align a html-page with the bottom of the browser-window. This is my apporach:

  

  

        
                      

              相关标签:
       
      

Answer 1

I would just give your outer-wrapper a height of 100% (along with html, body):

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.outer-wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    overflow-y: auto;
    background-position:bottom; //Edit
}

Then the outer-wrapper will always keep the body's height. There’s no need for the 950px height min because in the case that the viewport is too small you wanted for this to scroll and in the other case the viewport is bigger than 950px - well, it's bigger than 950px - that's a good thing.

Answer 2

Edit section from your code here

.outer_wrapper 
{
    background-color:red;
    /*min-height: 550px;*/
    margin-left: -75px; 
    top:auto;
    bottom: 0;
    position: absolute;
    left:50%;
}

and you are specifying your red box is above the body, if you put it inside body it supposed to be placed like it as you also have specify min-height of container.

Answer 3

The following demo should work, if I understand what you want correctly:

http://jsfiddle.net/C5Nce/10/show/

I just used a media query to detect when the page is less than 550px and set the element to be pinned to the top instead:

@media screen and (max-height: 550px) {
       .outer_wrapper {
           top: 0;
       }
}

I've coloured it green so you can tell when the query fires.

Answer 4

.outer {
    position:absolute;
    height:100%;
    width:100%;
    background-color:#aaaaaa;
    margin:0;
    padding:0;
}
.content {
    position:relative;
    width:90%;
    height:90%;
    background-color:#444444;
    margin:5%;
}
.inner {
    position:absolute;
    height:20%;
    width:100%;
    background-color:#eeeeee;
    bottom:0;
    margin-bottom:10%;
}

---

<div class="outer">
    <div class="content">
        <div class="inner"></div>
    </div>
</div>

---

http://jsfiddle.net/L8H9J/

1) Remove the margin-bottom style from the inner class

2) All the content you add inside the inner class will be aligned with the bottom

3) Because of the flow of the document in HTML, you cannot explicitly align them with the bottom

4) You can use this trick to do so, but again all elements inside the inner class will be with flow of position:static

5) There comes the use of JavaScript to determine suitable margins for each element inside the inner class

Tip: Use percentages; although you want the wrapper to be of height ~950px, but if you can use percentages for the dimensions, you would really love watching your web applications scale with the browsers: