Footer and footer

Footer and footer

Html code:

<Div class = "container"> <div cass = "header"> </div> <div class = "body"> </div> <div class = "footer"> </div>

First case: footer scrolls with the scroll bar

. Container {position: relative; width: 100%; min-height: 100% ;}. body {padding-bottom: 50px ;}. footer {height: 50px; position: absolute; bottom: 0px; left: 0px ;}

Case 2: footer is always fixed at the bottom

. Container {position: relative; width: 100%; min-height: 100% ;}. body {padding-bottom: 50px ;}. footer {height: 50px; position: fixed; bottom: 0px; left: 0px ;}

Note:
Do not set the. container height to 100%. Otherwise, it will not be able to scroll with the scroll bar.