2012-01-09 103 views
0

我想實現一個棘手的註腳:問題用粘頁腳

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*/ 
} 
+0

感謝科林......我試圖格式化... – user481913 2012-01-09 21:44:00

回答

0

,我的天哪。很多簡單的修復代碼。

試試這個:

我創建了一個簡單的jsfiddle供您參考。

http://jsfiddle.net/xtYYn/

希望這能解決問題, 謝謝, 亞倫

+0

也不能肯定這是否堅守底部在所有情況下和它適用於每個瀏覽器或版本嗎? – user481913 2012-01-09 21:44:36

+0

@ user481913:是的,它確實堅持在每一種情況下的底部,是的,它確實在每個瀏覽器和版本。我一直都在使用它。這幾乎就像我的粘腳。測試一下! :-D – 2012-01-09 21:45:27

+0

當我嘗試實施你爲我的樣式表中的CSS建議的更改,它不起作用 – user481913 2012-01-09 22:23:31