CODEWITHSUNDEEP
htmlcssposition
sander
sander

Reputation: 398

css position: relative; stick to bottom

<body style="min-height:2000px;">
    <div id="test" style="position:relative;bottom:0;">
         some dynamically changed content
    </div>
</body>

What do i expect:
-If #test height is greater or equal to body's it should stick to bottom (as it happens now cuz of block model)
-If #test height is less than body's it should however stick to bottom, having white space above it. (which doesn't happen, #test doesn't stick to bottom).

-Using position:absolute is not acceptable as then #test will not influence body height when #test is higher than body.
-Using position:fixed is not acceptable as then #test will stick to bottom of window, not body.

Q: Can I get what I expect using css only? How?

Sorry for poor English, however I think the question is easy to understand.
Thank you.

P.S.: I need that in css because some dynamically changed content is changed via js and I want to avoid recalculating #test div position each time it changes.

UPD:

I've also tried some display:inline-block; vertical-align:bottom; stuff still no result.

UPD2:

Thank you guys, still it seems, that easiest way is just to add a couple of lines to my javascript to recalculate body height on #test height change.

Upvotes: 28

Views: 107854

Answers (12)

peni4142
peni4142

Reputation: 545

I am late too, but I think margin-top: auto will do the trick:

#test {
  margin-top: auto;
}

Upvotes: 0

Homam
Homam

Reputation: 706

short answer: No YOU can't do this with pure css because it is just the reversed direction to the normal flow of page (I mean bottom to top);
you can use this plugin which is very easy to use stickyjs;
use it with bottomSpacing: 0

EDIT
this plugin uses position: fixed too!
then I think you should write it down by yourself or have someone to write it for you :D

Upvotes: 1

user2625636
user2625636

Reputation: 351

Old post, I know, but yet another solution would be to create a wrapper for your content with a minimal height of 100vh - footerHeight this solution requires that you know the height of the footer...

<body>
  <div class="wrapper">
    your content
  </div>
  <div class="footer">
    footer content
  </div>
</body>

and your css would look like this:

.wrapper {
  min-height: calc( 100vh - 2em );
}
.footer {
  height: 2em;
}

Upvotes: -1

V&#245; Minh
V&#245; Minh

Reputation: 155

here are solution I come up with

<ul class="navbar">

    <li><a href="/themes-one/Welcome"> Welcome <i></i></a></li>
    <li><a href="/themes-one/Portfolio"> Portfolio <i></i></a></li>
    <li><a href="/themes-one/Services"> Services <i></i></a></li>
    <li><a href="/themes-one/Blogs"> Blogs <i></i></a><i class="arrow right"></i>
        <ul class="subMenu">
            <li><a href="/themes-one/Why-Did-Mint-Net-CMS-Born"> Why Did Mint Net CMS Born <i></i></a></li>
            <li><a href="/themes-one/Apply-AJAX-and-Mansory-in-gallery"> Apply AJAX and Mansory in gallery <i></i></a></li>
            <li><a href="/themes-one/Why-did-Minh-Vo-create-Mint-Net-CMS"> Why did Minh Vo create Mint Net CMS <i></i></a></li>
        </ul>
    </li>
    <li><a href="/themes-one/About"> About <i></i></a></li>
    <li><a href="/themes-one/Contact"> Contact <i></i></a></li>
    <li><a href="/themes-one/Estimate"> Estimate <i></i></a></li>


</ul>

<style>

    .navbar {
        display: block;
        background-color: red;
        height: 100px;
    }

    li {
        display: table-cell;
        vertical-align: bottom;
        height: 100px;
        background-color: antiquewhite;
        line-height: 100px;
    }

    li > a {
        display: inline-block;
        vertical-align: bottom;
        line-height:initial;
    }

    li >ul {
        display: none;
    }


</style>

Upvotes: 0

librewolf
librewolf

Reputation: 454

I know it's an old question, but you could try doing:

top: 100%;
transform: translateY(-100%);

Transform operates with the size of the element itself, therefore it will climb back to the container at the very bottom. You can use letters for all 3 axis.

Upvotes: 31

Alper Guven
Alper Guven

Reputation: 81

We do like that:

Html:

<body>
   <div id="bodyDiv">
      <!-- web site content is here -->
   </div>
</body>
<footer>
   <!-- Footer content is here -->
</footer>

Jquery:

$( document ).ready(function() 
{
   $('#bodyDiv').css("min-height",screen.height);
});`

dynamically change content element min-height attribute according to screen resolution.

Upvotes: -1

CHlM3RA
CHlM3RA

Reputation: 133

Yes it is Posiible with CSS only:

HTML:

<body>
    <div id="test">
        some dynamically
        changed content
    </div>
</body>

CSS:

body{
    line-height: 2000px;
}

#test{
    display: inline-block;
    vertical-align: bottom;
    line-height: initial;
}

JSFiddle

If you want to have the text on the bottom of the screen then you can use:

body {
    line-height: 100vh;
    margin: 0px;
}

Upvotes: 0

Durthar
Durthar

Reputation: 167

Because of the dynamic height nature of #test you cannot do this with CSS alone. However, if you're already using jQuery, a quick .height() call should be able to get you what you need (#test height needs to be subtracted from positioning it 2000px from the top).

<style>
body {
    min-height: 2000px;
}

#test {
    position: relative;
    top: 2000px;
} 
</style>

<script>
var testHeight = $("#test").height();
$( "#test" ).css({
    margin-top: -testHeight;
});
</script>

Upvotes: 8

Aditya Ponkshe
Aditya Ponkshe

Reputation: 3890

It is very much possible using relative position. this is how you do it.

Assume height of your footer is going to be 40px. Your container is relative and footer is also relative. All you have to do is add bottom: -webkit-calc(-100% + 40px);. your footer will always be at the bottom of your container.

HTML will be like this 

<div class="container">
  <div class="footer"></div>
</div>

CSS will be like this

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.footer{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Live example here

Hope this helps.

Upvotes: 4

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

The only two pure-CSS ways to create sticky footer of dynamic height I know are using flexboxes (no support in IE9-, unfortunately) and using CSS tables:

html, body {
    height: 100%;    
    margin: 0;
}
body {
    display: table;
    width: 100%;
    min-height:2000px;
}
#test {
    display: table-footer-group;
    height: 1px; /* just to prevent proportional distribution of the height */
}

Upvotes: 4

RbG
RbG

Reputation: 3193

if u dont want to use position:absolute; left:0; bottom:0; then u may try simple margin-top:300px;...

Upvotes: 0

Nick Bull
Nick Bull

Reputation: 9866

#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
/* IE6 */
* html #footer{
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

JSFiddle: http://jsfiddle.net/As3bP/ - position: fixed; is the obvious way of doing this, and if this affects your layout, try posting your problems here. It'd be easier to modify the CSS of your content than trying to find another way of doing this.

The IE6 expression is not good for speed at all but it works, read about that here: http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202.html

EDIT Read your edits, please forget the above. To be stuck at the bottom of the body, it'd be easy to position it in your HTML. This is simple stuff, please post example code if you need further help. Positioning something at the bottom of the page, by default, positions at the bottom of the page.

JSFiddle: http://jsfiddle.net/TAQ4d/ if you really actually need that.

Upvotes: 1

Related Questions