Question

好的 - 我承认我是一个CSS Newb（温柔的请），而不是那么多的HTML大师 - 我的业务逻辑比前端好多了。也就是说，我正在为我的丈夫开发一个网站（我们不能在外面完成它）。我试图在可能具有可变长度的页面上实现粘性页脚。问题是，自从我在页面左侧实现菜单后，页脚跳到页面顶部。我不明白为什么，似乎无法弄明白为什么。页面内容从数据库中提取。基本的HTML布局是用HTML编写的，其中包含通过php从数据库中写出的详细信息（标签条，菜单，内容）。基本的HTML结构是这样的：

<body>
    <div id='content-container'>
         <div id='wrapper'>...</div>
         <div id='body-wrapper'>
             <div id='floater-wrapper'>
                  <div id='floating-menu-1'>
                  </div>
                  <div id='floating-menu-2'>
                  </div>
             <div>
             <div id='content'>
             </div>
          </div>
          <div id='foot-wrapper'>
               <div id='foot-content'>
               </div>
          </div>
 </body>

CSS如下（注意：我已经尝试了我在这里和网上找到的粘性页脚解决方案的所有变体。）任何建议都表示赞赏。

<style>
/*START NAV*/
ul, ul li, li{list-style: none;}
#navigation-wrapper{
    background-image: url(images/line.png); 
    background-repeat: no-repeat; 
    background-position: right bottom; 
    height: 100px; 
    width: 1000px; 
    margin: 27px 0 0;
    }
#logo{
    display: block; 
    float: left; 
    height: 150px; 
    width: 200px; 
    display: block; 
    text-indent: -999993px; 
    background-image: url(images/wgclogo2_small.png); 
    background-repeat: no-repeat; 
    background-position: center center;
}
#logo a {
    margin: 10px 0 0; 
    display:block;
    height:100%;
    width:100%;
}
#navigation{
    display: block; 
    float: right; 
    margin: 10px 0 0 0;
}
#navigation ul {
    color: #323131; 
    font-family: "proxima-nova",sans-serif; 
    text-transform: uppercase; 
    text-align: right;
}
#navigation li {
    display:inline; 
    padding: 0 0 0 15px; 
    font-weight: 600;
}
#navigation a {
    color: #323131; 
    text-decoration: none; 
    font-size:13px;
}
#navigation a:hover{
    color: #78756f;
    border-bottom: 5px solid #323131; 
    border-top: 5px solid #323131; 
    padding-top: 12px; 
    padding-bottom: 10px;
}
div#nav{
    width: 577px;
    height: 44px;
}
div#nav ul {
    width: 100%;
    height: 100%; 
    overflow: hidden;
}
div#nav ul li {
    float: right;
}
div#nav ul li a {
    text-indent: 100px; 
    overflow: hidden; 
    display: block; 
    height: 44px;
}

/*Start First item in Nav 42+0=42 */
div#nav ul li.about a {width: 42px}
div#nav ul li.about a:hover, div#nav ul li.about a.current { }
/*End First item in Nav*/

/*Start Next item in Nav 58+42=100 */
div#nav ul li.food a {width: 58px}
div#nav ul li.food a:hover, div#nav ul li.food a.current { }
/*End Next item in Nav*/

/*Start Next item in Nav 54+100=154 */
div#nav ul li.special a {width: 54px}
div#nav ul li.special a:hover, div#nav ul li.special a.current { }
/*End Next item in Nav*/

/*Start Next item in Nav 42+154=196 */
div#nav ul li.service a {width: 42px}
div#nav ul li.service a:hover, div#nav ul li.service a.current { }
/*End Next item in Nav*/

/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.cost a {width: 52px}
div#nav ul li.cost a:hover, div#nav ul li.cost a.current { }
/*End Next item in Nav*/

/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.contact a {width: 57px}
div#nav ul li.contact a:hover, div#nav ul li.contact a.current { }
/*End Next item in Nav*/

/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.customers a {width: 50px}
div#nav ul li.customers a:hover, div#nav ul li.customers a.current { }
/*End Next item in Nav*/
/*END NAV*/
/*START CONTENT & HEADERS*/
html, body{
    height: 100%;
    background-image: url(images/bkg.png); 
}
#content-container{
    min-height: 100%;
    position:relative;
    vertical-align: top;    
}

#body-wrapper{
/*  overflow: auto; */
    min-height: 100%;
    padding-bottom: 40px;
    display: inline-block;
    position:absolute;  
    vertical-align: top;

}
#content{
    display:inline-block;
    position: absolute;
    width:800px;
    margin-left: 200px;
}
h1 {
    text-align: left;
    text-decoration: none;
    color: #003366;
    font: normal normal 30px Georgia, "Times New Roman", Times, serif;
    margin-bottom: 10px;
}

h2 {
    text-align: left;
    text-decoration: none;
    color: #993300;
    font: 24px Georgia, "Times New Roman", Times, serif;
    margin-bottom: 10px;    
}

h3 {
    text-align: left;
    font: 16px Georgia, "Times New Roman", Times, serif;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
}
p.alert{
    text-align: left;
    font-weight: bold;
    font: 12px Georgia, "Times New Roman", Times, serif;
    color: #ff5600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

#content ul, ol {
    border-left: 3px solid #dfedcb;
    margin-left: 5px;
    margin-bottom: 20px;
    padding-left: 15px;
    color: #323131;
    font: 16px Georgia, "Times New Roman", Times, serif;
}

/* START Floating Menu Styles */
#floater-container{
    display: inline-block;
    position:absolute; 
    left: 0px; 
    vertical-align: top;
    text-align: start;
}
div.floating-menu {
    position:static;
    background:rgba(0.25,0.25,0.25,0.25);
    border:1px solid #299366;
    width:185px;
    z-index:300;
}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}

/*END Floaters */



/*END CONTENT & HEADERS*/

/*START LOGIN*/
#login-wrapper{ vertical-align:  middle; border-style: solid; border-width: thin; height: 125px; width: 500px; margin: 27px 0 0;}
#facebook{text-align: center; vertical-align: middle; background-image: url(images/login_border.png); background-position: right center; background-repeat: no-repeat; display:inline-block ; float: left; width: 200px; height: 125px; margin: 0 0 0 0;}
#local_login{vertical-align: middle; display: inline-block; float: right; width: 300px; height: 125px; margin: 0 0 0 0;}
/*END LOGIN*/
/* START TABSTRIP STYLES */

.tabStrip ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.tabStrip li {
    margin: 0 2px 0 0;
    list-style-type: none;
    float: right;
}
.tabLink {
    display: inherit;
    text-decoration: none;
    padding: 5px;
    background: #e8e8e8;
    border: #dadada solid;
    border-width: 1px 1px 0 1px;
    color: #8a8a8a;
}
.tabLinkActive {
    display: inherit;
    text-decoration: none;
    padding: 5px;
    background: #e0e0e0;
    border: #c0c0c0 solid;
    border-width: 1px 1px 0 1px;
    color: #0066ff;
}
.tabContent {
    display: none;
}
.tabContentActive {
    display: inherit;
    clear: both;
    background: #f0f0f0;
    border: 1px #dedede solid;
    padding: 10px;
/*  height:inherit; */
    width:97.5%;
}
/*END TABSTRIPS */


</style>

Answer 1

<div>之前的{p> #content应为</div>而您在</div>之前错过了一个结束</body>。

<body>
<div id='content-container'>
     <div id='wrapper'>...</div>
     <div id='body-wrapper'>
         <div id='floater-wrapper'>
              <div id='floating-menu-1'>
              </div>
              <div id='floating-menu-2'>
              </div>
         </div>
         <div id='content'>
         </div>
      </div>
      <div id='foot-wrapper'>
           <div id='foot-content'>
           </div>
      </div>
   </div>
 </body>

但除此之外，您使用#content和#body-wrapper的绝对定位。绝对定位会导致这些块在不同的层上被渲染，因此绝对定位后的任何内容都不会在这些块下面呈现，而是在position设置为relative的前一个块之下}。

我唯一能够将页脚粘贴到页面底部的解决方案是使用javascript。页面加载后，检查页面主要内容是否足够大，以便将页脚放在底部。如果没有，您可以设置相应元素的高度来实现它。

Answer 2

HTML：

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS：

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
/* IE 6 and down:
#container {
   height:100%;
}

Answer 3

您可以使用一个准备好的

http://www.cssstickyfooter.com/

支持的浏览器列表。

http://www.cssstickyfooter.com/browser-list.html

CSS / HTML5 - 粘性页脚无效

3 个答案: