在HTML / CSS中放置页脚时遇到问题

Question

i have a page with some contents and a footer at the bottem. but there is a problem with the footer. my footer sticks to the contents and do not stay at the bottom. when i use a position:relative for the body and a position:absolute; bottom:0; for the footer it sticks to the bottom but when i zoom and scroll down it is in the middle of the page. how can i fix this problem?

here is my code for the body:

width: 100%;
padding: 0;
margin: 0;
background: -webkit-linear-gradient(left,#000 0%,#222 100%);
background: -moz-linear-gradient(left,#000 0%,#222 100%);
background: -ms-linear-gradient(left,#000 0%,#222 100%);
background: -o-linear-gradient(left,#000 0%,#222 100%);
background: linear-gradient(left,#000 0%,#222 100%);
min-width: 970px;
position: relative;

and here is my code for the footer:

color: rgba(255,255,255,0.8);
text-align: center;
font-family: roya;
font-size: 0.9em;
letter-spacing: 0.07em;
line-height: 0.5em;
position: absolute;;
left: 0;
bottom: 0;
width: 100%;
min-width: 970px;
height: 65px;
clear: both;
background: #222;
border-top: 2px solid #666;
border-radius: 100px 100px 0 0;
margin: 0;

another thing is: my page usually doesn't have scrolling at all exept some small devices

Answer 1

您是否尝试将body设置为{height：100％;}？