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;

对于#foot

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

我想这就是你要找的。在我的示例中按下按钮以查看无论您在正文中放入多少内容，页脚是如何粘在底部的。希望这可以帮助你<3

$("#add").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".page-wrap");
});
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">
  
  <h1>Sticky Footer</h1>
  <h2>with Fixed Footer Height</h2>
  
  <button id="add">Add Content</button>  
     
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

于 2017-01-26T07:49:24.463 回答