底部一直在最底部不管内容多少

来源：互联网发布：java数据库代码生成器编辑：程序博客网时间：2024/05/06 14:54
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style type="text/css">    body,html {margin: 0;padding: 0;font: 12px/1.5 arial;height:100%;}#content {min-height:100%;position: relative;}#main {padding: 10px;padding-bottom: 60px;  }#footer {position: absolute;bottom: 0;padding: 10px 0;background-color: #AAA;width: 100%;}#footer h1 {font: 20px/2 Arial;margin:0;padding:0 10px;}  </style></head><body>   <div id="content">   <header>header</header>   <section>       <div id="main">                      <h1>main</h1>                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                      <br>                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                       <h1>main</h1>                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                      <br>                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                       <h1>main</h1>                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                      <br>                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                       <h1>main</h1>                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                      <br>                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                       <h1>main</h1>                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                      <br>                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                       <h1>main</h1>                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                      <br>                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                       <h1>main</h1>                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>                      <br>                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>                      <p>文字文字文字文字文字文字文字文字文字文字</p>              </div>   </section>                           <footer>                  <div id="footer">                      <h1>Footer</h1>              <div>              </footer>          </div></body></html>
0 0