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
Post a Comment