开发者

Footer always at bottom but without fixed height

开发者 https://www.devze.com 2023-02-20 09:51 出处:网络
Can anyone help me to make an HTML code based on开发者_如何学编程 DIV\'s which has a simular result as this TABLE based code:

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>
0

精彩评论

暂无评论...
验证码 换一张
取 消