Align all content with the bottom of the page?
I am trying to align an html page with the bottom of the browser window. This is my apporach:
<body>
<div class="outer-wrapper">
</div>
</body>
.outer-wrapper{
min-height: 950px;
width: 100%;
position: absolute;
bottom: 0;
}
The problem with this solution is that when the screen is less than 950px, the top of the outer shell disappears above the screen and no scrolling is added. The focal image has both a body and an outer shell.
Here's an example, as you can see the top of the red box is above the body. http://jsfiddle.net/C5Nce/1/
source to share
The following demo should work if I understand correctly what you want:
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 anchored to the top, not:
@media screen and (max-height: 550px) {
.outer_wrapper {
top: 0;
}
}
I colored it green so you can know when the request fires.
source to share
I would just give your outer-wrapper
height 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 outer-wrapper
it will always maintain body height. There is no need for 950 pixels per minute because in the case where the viewport is too small you wanted it to scroll, and otherwise the viewport is greater than 950 pixels - well, it is greater than 950 pixels - that's good.
source to share
.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>
1) Remove the bottom edge style from the inner class
2) All content added inside the inner class will be aligned to the bottom
3) Due to the document flow in HTML, you cannot explicitly align them with the bottom
4) You can use this trick to do it, but again all the elements inside the inner class will be with a stream position:static
5) Comes using JavaScript to determine the appropriate fields for each element inside the inner class
Advice: 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:
source to share
Edit the 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 indicate that your red box is above the body if you placed it inside the body, which should be placed in the same way you specified the min-height
container as well .
source to share