Menu
<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.
448
Just set element child to position: relative and than move it top: 100% (that's the 100% height of the parent) and stick to bottom of parent by transform: translateY(-100%) (that's -100% of the height of the child).
Relative Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.
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.
181
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
