粘性页脚问题

时间:2012-01-09 21:14:53

标签: html css

我正在尝试按照此处的建议实现粘性页脚:

http://www.cssstickyfooter.com/using-sticky-footer-code.html

我按照建议完成了所有操作,但不在页面/内容的底部...请参阅此处http://tinyurl.com/eehelp

希望有人可以帮助我解决这个问题,以便页脚能够完成所有内容。

的index.php

 <body onload="setLeftRightBar()">
   <div id="wrap">  
     <div id="header">
        <?php include("header.php"); ?>

        <div id="bar"> 
          <div id="menuholder">
            <div id="menu">
               { Some content }
            </div>
          </div>
        </div>  
      </div>

      <div id="content">
         <div id="left_content">
           <?php include('left_sidebar.php'); ?>
         </div>

         <div id="main_content">    
           <?php include("path.inc.php"); ?> 

           <div style="display:none;">
              <?php echo "<!--#&88;#&90;#&101;#&114;#&111;".                      "#&83;#&99;#&114;#&105;#&112;#&116;#&115;#&46;#&99;#&111;#&109;-->"; ?>
           </div>

           <?php echo $content;unset($content);?>

         </div>

         <div id="right_content"> 
            { Some content }
            <div class="right_top" align="center">
               <?php echo $lang['SEARCH']; ?>
               <?php include("search.inc.php"); ?>
            </div>
         </div>
      </div>

      <div style="clear:both" ></div>
      <div style="clear:both" ></div>

   </div>
   <div id="footer" align="center"> 
     <div  class="footer_menu">
       <li><a href="about.php">About us</a></li> <li>|</li>
       <li><a href="terms.php"><?php echo $lang['TERMS_OF_USE']; ?></a></li><li>|</li> 
       <li><a href="privacy.php"><?php echo $lang['PRIVACY_POLICY']; ?></a></li><li>|</li> 
       <li><a href="contact.php">Contact us</a></li> <li>|</li>
     </div>

     <div  class="footer_menu2">
       <strong>Copyright &copy; 2011 <?php if(($y=date("Y")) != 2011) echo "- $y"; ?>    -      <?php echo $site_name; ?></strong>
     </div>  
  </div>
</body> 

Style2.css

 html { height:100%;-webkit-text-size-adjust: 70%;  }
 body { height:100%;padding:0px;    padding:0px;font-family:Arial, Helvetica, sans-serif;  }
 b          { font-size:14px;}
 #wrap { width:100%; height:100%; min-width:800px; min-height:100%; max-width:1600px; max-height:1200px; background-color:#FFFFFF; padding: 0;}
 #header
 {
padding:0 ;
height:250px;
 }

 #logo{
 /* notch below*/
   padding-top: 25px;
   height:10px;
   background-color: white;
   float:left;
   font-size: 14px;
   font-weight: bold;
 }      

 #logo a {
color: black;
text-decoration: none;
 }

  #logo a:hover {
color: #DF971E;
text-decoration: none;
 } 

 #bar{   
   height:25px;
   width:30%;
   min-width:360px;
   background-color:#cccccc;
   padding-top:0;         
 }


 #menuholder, #bar{
   float:right;
 }

 #menu{
   width:auto;          
   padding-right:15px;
 }

  #searchbar { width:100%; height:auto;padding-top:20%;}
  #top_search {width:100%; height:auto;}
  #bottom_search {width:89%; height:auto;padding-left:10.5%;font-size:75%;}
  .sarch_box { width:10%; height:auto; float:left; padding-left:1%;font-size:75%;}
  .box_1 { width:20%; height:auto; float:left;font-size:85%;}
  .box_1 input { width:80%; height:1.2em;font-size:85%;}
  .box_1 select { width:70%; height:1.5em;font-size:85%;}
  .box_2 {width:2%; height:auto; float:left;}
  #content { width:90%; min-width:790px; height:auto; padding-left:10%; padding-top:0px; overflow:auto; padding-bottom: 150px; }
 #left_content { width:0%; min-width:0px;height:auto; float:left; }
 #left_searchbar_title {width:95%;height:2%;padding-top:1%;padding-bottom:1%;padding-left:5%;background-color:#A5D959;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
 #left_sidebar_content{width:100%;height:2%;background-color:#EFFFD8;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
 #main_content { width:59%; min-width:600px;height:auto;float:left;  }
 .main_content_header   {padding-left:2%;color:#BB532E;font-size:100%;font-family:Arial, Helvetica, sans-serif;font-weight:bold;padding-bottom:5%;}
.content_header {width:70%; height:auto; padding-left:3%;}
.left_1 {padding-left:2%;width:.05em; height:100px;background-image:none;background-repeat:repeat-y;float:left;padding-left:2px; }
.left_6 { width:.05em;height:100px;background-image:none;background-repeat:repeat-y;float:left; }
.left_content_middle    {width:95%; min-width:550px;float:left;font-size:80%;font-family:Arial, Helvetica, sans-serif;  border:1px solid #c6c6c6;border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px} <!-- background:#ECF5F4; -->
  .content_title {padding:2%; text-align:center; color:#BB532E; font-weight:bold;font-size:95%;font-family:Arial, Helvetica, sans-serif; }
  .content_line{size:2px; width:95%; background-image:url(images/horizotal-line.gif);}
  .left_2 { padding-left:3%; width:21.5%; min-width:130px;height:auto; float:left; }
  .left_3 { width:23.5%;height:auto;float:left;}
  .left_4 { width:23.5%;height:auto;float:left;}
  .left_5 { width:23.5%;height:auto;float:left;}

  #right_content { width:20%;min-width:150px;height:auto; float:left;padding-left:1%;padding:10px; border:1px solid #c6c6c6; border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px}<!-- background-color:#ECF5F4; -->
  .right_top { width:100%; height:auto; color:white; font-size:100%; color:#336699;}
  .Left_portion { width:45%; height:auto; float:left;padding-left:8%;}
  .right_portion { width:45%; height:auto; float:left;}
  .right_content_title {color:#BB532E;font-weight:bold;font-size:70%;font-family:Arial, Helvetica, sans-serif;padding-bottom:4%;padding-top:5%; }
  .right_content_body   {color:#5E6472;font-size:70%;font-weight:bold;font-family:Arial, Helvetica, sans-serif;padding-bottom:3%;}
  .menu_bar { width:10%; font-family:Arial, Helvetica, sans-serif; color:red; float:left; font-size:50%;}
  .gap {width:35%;}

  #footer   {width:100%;padding:auto;text-align:center;background-color: #3399ff; line-height:40px; color:white; position: relative;
padding-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

 .footer_menu {
   color: white;
   height: 1.2em;
 }

 .footer_menu2 {
   color:gray;
   font-size: 13px;
   padding-top: 21px;
   width: 100%;
 }

.footer_menu li {
  color: white;
  padding-right: 1%;
  display: inline;
}

.footer_menu li a   { color:#fff; text-decoration:none;}
.footer_menu li a:hover { text-decoration:underline}
.footer_menu strong { font-weight:lighter; color:#666}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
  content:"";
  height:100%;
  float:left;
  width:0;
  padding-top:-32767px;/* thank you Erik J - negate effect of float*/
}

1 个答案:

答案 0 :(得分:0)

我的天哪。很多简单修复的代码。

试试这个:

我创建了一个简单的jsFiddle供您参考。

http://jsfiddle.net/xtYYn/

希望这可以解决问题, 谢谢, 亚伦