Footer always at bottom but without fixed height
Can anyone help me to make an HTML code based on开发者_如何学编程 DIV's which has a simular result as this TABLE based code:
<HTML>
<BODY>
<STYLE>
html,body {height:100%;}
</STYLE>
<TABLE cellpadding=0 cellspacing=0 height=100% width=100%>
<TR>
<TD bgcolor=pink>
Page content...<BR>111<BR>222<BR>333
</TD>
</TR>
<TR>
<TD bgcolor=yellow id=footer style="height:1%">
Footer...<BR>111<BR>222<BR>333<BR>
<BUTTON onclick="document.getElementById('footer').innerHTML+='<BR>more footer...';">Increase footer</BUTTON>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
add this as CSS to your footer..
#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background-color : //whichever color you want
}
You need to specify minimum height of the center div/element.
For example following HTML snippet would ensure that footer is always at least 600px from the top of the browser
<html>
<head>
</head>
<body>
<div style="min-height: 600px;" id="center-content">
</div>
<div id="footer">
</div>
</body>
</html>
加载中,请稍侯......
精彩评论