0

これが私のhtmlページです。

<!DOCTYPE HTML>
    <head>
        <style>
            #foot {
               position:absolute;
               bottom:0;
               width:100%;
               height:60px;   /* Height of the footer */
               background:#6cf;
            }

            .container{
                border: 1px solid RGB(100,100,100);
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 5px;
                height: 940px;
                width: 1200px;
                background: white;
                box-shadow: 0px 0px 5px;
                position: absolute;
                margin-left: 25px;
                margin-right: 20px;
                margin-top: 80px;
            }
        </style>
    </head>
    <body>
        <h1>My Page</h1>
        <div class="container">
        </div>
        <footer id="foot">
            My footer
        </footer>
    </body>
</html>

ただし、これにより、ページの間にフッターが保持されます。ここで誰か助けてくれませんか？

4

3 に答える 3

2

使いたい

position:fixed;

#足のために

http://jsfiddle.net/q3U4R/

おそらくより良い方法：

http://jsfiddle.net/q3U4R/1/

* { margin:0; padding:0; } 

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

. container { padding-bottom: 150px; }  /* must be same height as the footer */

#foot { 
    position: fixed;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
    background:#ff0;
    bottom:0px;
    width:100%;
}
于 2013-03-15T05:29:00.553 に答える
0 
<!DOCTYPE HTML>
<head>
  <style>
    #foot {
      position:absolute;
      bottom:0;
      width:100%;
      height:60px;   /* Height of the footer */
      background:#6cf;
    }

    #overlay {
      Z-INDEX: 9999; 
      POSITION: fixed; 
      TEXT-ALIGN: center; 
      WIDTH: 100%; BOTTOM: 0px; 
      HEIGHT: 80px; 
      _position: absolute
    }

    .container{
      border: 1px solid RGB(100,100,100);
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 5px;
      height: 940px;
      width: 1200px;
      background: white;
      box-shadow: 0px 0px 5px;
      position: absolute;
      margin-left: 25px;
      margin-right: 20px;
      margin-top: 80px;
    }
  </style>
</head>
<body>
  <h1>My Page</h1>
  <div class="container">
  </div>
  <div id="overlay">
    <footer id="foot">
    My footer
    </footer>
  </div>
</body>
</html></footer></div></h1></body></style></head>
于 2013-03-15T05:38:30.330 に答える