Question

我的xhtml页面上的页脚有问题...我想将页脚总是放在页面的末尾，在页面的底部，这样当页面内容不佳时页脚会坚持到屏幕的底部，但是当页面长得多时，它会粘贴在页面的最后一个内容之后的末尾

我该怎么办？

这是我的CSS文件

html {
   height:98%;
   margin: 0 auto 0 auto;
   width:1280px;
   padding:2px;
   padding-bottom:0px;
} 

body {
   overflow:auto;
   width:100%;
   margin: 0 auto 0 auto;
   height:100%;
}

#container {
   min-height:100%;
   height:100%;
   margin:0 auto -50px;
}

#box {
   min-height:100%;
}

#push {
   height:50px;
   clear:both;
}

#footer {
   height:50px;
   clear:both;
   position:relative;
   bottom:0px;
   width:100%;
}

这是我页面的结构

<html>
   <h:head></h:head>
   <h:body>
      <div id="conatiner">
         <div id="box">
            <header></header>
            <div id="externalborder">
            <div id="push"></div>
            <div id="footer"></div>
         </div>
      </div>
    </h:body>
</html>

Answer 1

你只需将底部放在0px上并将位置设置为固定在页脚上。例如：

#footer {
    position:fixed;
    bottom:0px;
}

#container {
    padding-bottom:3em;
}

Answer 2

当文档高度大于视口时，您可以将页脚切换为静态定位。这使您能够在内容较短时将页脚放置在视口底部，并在内容较长时正常位于页面末尾。

您需要使用javascript检测内容高度何时大于视口，并添加将页脚更改为静态定位的样式。

html页面上的页脚在底部动态粘贴

2 个答案: