css position: relative; stick to bottom

Asked 8/7, 2013 at 7:30 Answered 8/5, 2023 at 8:55

<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.

Novelize answered 8/7, 2013 at 7:30 Comment(11)

I guess you are looking for sticky footer.. – Kendo 8/7, 2013 at 7:32

If you are really looking for sticky footer try this - mystrd.at/modern-clean-css-sticky-footer .Best solution so far – Lodi 8/7, 2013 at 7:35

I haven't met any "sticky footer" solutions without position:fixed or postition:absolute. I'm wondering, if there is any. – Novelize 8/7, 2013 at 7:36

Please, reread question. There i told why 'absolute' is not acceptable. Plus content is changed dynamically, so i can't tell exact height of #test without js calculations. – Novelize 8/7, 2013 at 7:37

Why do you have the min-height: 2000px;? Is this higher than your screensize? – Nucleoprotein 8/7, 2013 at 7:55

Just Try the Ryan Fait Sticky Footer , Here is a Demo. – Papism 8/7, 2013 at 7:55

twitter.github.io/bootstrap/examples/sticky-footer.html – Led 8/7, 2013 at 7:56

@Novelize use position: absolute or fixed to #test and give position: relative to body tag. that will fix for sure. – Cofield 8/7, 2013 at 7:57

@rednaw : yes, but this doesn't matter. – Novelize 8/7, 2013 at 8:6

@Cofield not helped :( – Novelize 8/7, 2013 at 8:7

@ others: #test height is changed dynamically by js SO i can't use standart sticky footer things as they assume that i already know the height of the footer. – Novelize 8/7, 2013 at 8:8

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.

Lanell answered 16/6, 2016 at 13:58 Comment(0)

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>

Caressive answered 22/4, 2015 at 5:53 Comment(0)

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 */
}

Hines answered 8/7, 2013 at 8:27 Comment(1)

display: table-footer-group; works like a charm. Especially when the body element has a dynamic height and min-height: 100vh;. – Lexicostatistics 24/7, 2018 at 2:59

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.

Aestival answered 6/2, 2015 at 12:20 Comment(0)

#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.

Knoll answered 8/7, 2013 at 7:36 Comment(1)

I'll try to explain:1) take code from my question.2) Change position:relative to position:absolute. #test sticks to bottom of the body, that's good. 3) Add "height:3000px" to #test's style. It is still at the bottom of the body (good), but the body is still 2000px and 1000px of #test is hidden above the body (that's bad); – Novelize 8/7, 2013 at 8:1

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

Iciness answered 8/7, 2013 at 7:39 Comment(3)

I was afraid of that. Now i'll need to add more calculations to my js. – Novelize 8/7, 2013 at 7:48

and as far as i know there is not something like that – Iciness 8/7, 2013 at 7:51

@Novelize it is possible using html5 and css3. check my answer. – Aestival 6/2, 2015 at 13:6

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

Parapsychology answered 8/7, 2013 at 8:20 Comment(1)

That's what im going to do now. As long as #test height changes dynamically i will need to do that with JS. – Novelize 8/7, 2013 at 10:8

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;
}

Clamor answered 21/4, 2016 at 8:23 Comment(0)

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>

Palstave answered 2/7, 2017 at 10:0 Comment(0)

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

#test {
  margin-top: auto;
}

Malapropos answered 8/5, 2023 at 8:55 Comment(0)

-1

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.

Rufina answered 12/5, 2016 at 10:38 Comment(0)

-1

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;
}

Machuca answered 24/8, 2017 at 22:46 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags