Home > sysadmin > Use CSS to keep footer on the bottom of a container when you vary the size

Use CSS to keep footer on the bottom of a container when you vary the size

April 2, 2018

You can keep the footer on the bottom of a CSS container like this example. The
Height statement in the the #topofpage ID (1280px) controls the whole page container.
The #pages statement is the lower page half below the horizontal navigation bar.
If you vary the page size with the #topofpage height the #pages and #footer sections
will keep the footer on the bottom.

#topofpage {
width:870px;max-width:100%;height:1280px;max-height:100%;margin-right:auto;margin-left:auto;margin-bottom:auto;border-bottom:1px solid black;box-shadow: 400px 0px 0px 0px rgb(100,125,100), -400px 0px 0px 0px rgb(100,125,100);border:1px solid black;

#pages {
font-family: “Helvetica”, “Arial”, sans-serif;
height:calc(100% – 340px);
# height:940px;
position:relative;
margin-bottom:0px;
margin-top: 0px;
margin-bottom: 0px;
border:none;
# border-radius: 20px;
font-size:13pt;
text-align:justify;
}
#footer {
clear;
height:40px;
font-size: 15px;
bottom:0;
font-family:”Times New Roman”;
text-align:center;
border:none;
# border-radius: 20px;
}

Categories: sysadmin
%d bloggers like this: