html - css align footer bottom without using position:absolute -



html - css align footer bottom without using position:absolute -

i have website made of "pages" (100% height on visible area). please @ next css:

html { height: 100%; } body{ height:100%; margin: 0 auto; } .page{ height: 100%; margin: 0 auto; min-height: 700px; min-width: 1024px; } .content { margin: 0 auto; text-align: center; height: 100%; min-height: 800px; min-width: 1024px; } .footer { width: 100%; min-height: 200px; background-color:red; } .hidden{ width: 100%; height: 500px; background-color:blue; } .image { display:block; height: 100px; width: 100px; }

and code:

<div class="page"> <div class="content"> <img class="image" src="img/image.png1"> <img class="image" src="img/image.png2"> <img class="image" src="img/image.png3"> <div class="hidden" style="visibility:hidden"> </div> </div> <div class="footer"> </div> </div>

i need: 1) footer aligned bottom when page loads 2) after seconds, javascript show hidden div, , footer must slide down.

i can't obtain these 2 things @ same time, because can obtain 1) with

footer { position: absolute; bottom: 0; }

but in way when show hidden div overlaps footer. otherwise if remove lastly code, when hidden div appears footer slides downwards correctly, when load page footer not @ bottom. have advice?

how about;

position: relative; bottom: -100%;

html css position show

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

c# - Create a Notification Object (Email or Page) At Run Time -- Dependency Injection or Factory -

Set Up Of Common Name Of SSL Certificate To Protect Plesk Panel -