bottom always remains the same distance

[Anonymous]

I have a fixed element that i want to always have the same height distance from the bottom of the viewport. if you rescale the browser vertically you can see that the blue div shrinks, but eventually it will overflow the viewport. I want the element to always remain the same distance from the bottom viewport even when rescaling. Heres a pen http://codepen.io/Jarolin/pen/vcHLp

[Raul]

Please provide Blue div height in pixel(px) instead of percentage(%)

[Anonymous]

i need the blue div to be responsive vertically. I need it to adjust and be fully visible on the viewport vertically. So i need %.

[sadunaresh]

I want the element to always remain the same distance from the bottom viewport even when rescaling. Heres a pen

mention BOTTOM in pixels(for ex..bottom:30px) for blue div, then the distance between blue div and viewport bottom will remain same irrespective of veiwport size..

[Anonymous]

That does what i want it to do, but it basically reverses it. Now the top wont remain the same distance. from the upper viewport. Maybe there is a solution with jquery

[Raul]

try using _ bottom : 0px;_ or give margin from bottom…

[sadunaresh]

check this out, the most possible solution without jQuery

don not mention height of the element, just mention top and bottom offsets in pixels… if you some fixed width at any point of time you can use max-width and min-width properties….

if you want fixed width, you will have to compromise either with bottom or top offset … :)

let me know if this is not what you are expecting, will try in jQuery… :)

[Author]

Posts