メインページのフッターが消えます

Question

私はこれを取り組んできましたが、websiteとなっていますが、フッタが消えてしまうという問題があります。私はページをリロードしてから消えてしまいます。私はちょうど私のフッタが私のページのページの下部に表示されます。

<div id="topbar"> 
     <div class="width-container"> 
      <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> 
      <div id="search"> 
       <form action="<?php bloginfo('url');?>/tech" method="GET" id="searchF"> 
        <!--<input type="hidden" name="page" value="<?php if(isset($_GET["page"])){echo $_GET["page"];} else {echo '1';} ?>">--> 
        <?php 
         $searched_term = get_query_var('recipe_search'); 

         if (empty($searched_term)) { 
          $searched_term = isset($_GET["search"]) ? $_GET["search"] : ""; 
         } 
        ?> 
        <input id="sfield" type="text" name="search" placeholder="Keywords" <?php if (!empty($searched_term)) {echo 'value="'.$searched_term.'"';} ?>> 
        <input id="sbutton"input type="submit" value="Search" onClick="check()"> 



      </div> 

    <div id="extra-wrap"> 
     <div id="extra-search"> 
      <div id="picture-side"> 

       <input type="radio" name="images" value="1" id="picture" 
       <?php if(isset($_GET["images"]) && $_GET["images"]=='1'){ echo 'Checked';} ?>><label for="picture">Pictures</label> 
      </div> 

      <div id="picture-side1"> 

       <input type="radio" name="images" value="0" id="picture2" 
       <?php if(isset($_GET["images"]) && $_GET["images"]=='0'){ echo 'checked';} ?>><label for="picture2">No Pictures</label> 
      </div> 

      <div id="picture-side2"> 

       <input type="radio" name="images" value="0" id="video" 
       <?php if(isset($_GET["video"]) && $_GET["video"]=='1'){ echo 'checked';} ?>><label for="video">Video</label> 
      </div>  
        <div id="time-side"> 
         <!--<small>Published time</small>--> 
         <input type="text" id="to" name="to" placeholder="Any time"> 
        </div> 



        <div class="styleselect"> 
         <select data-placeholder="Select a Category" name="cat" id="cat" class="select2" multiple > 
            <option selected value="all">All Categories</option> 
           <option value="EN">England</option> 
           <option value="GR">Greece</option> 
           <option value="US">USA</option> 
           <option value="IT">Italy</option> 
           </select> 
        </div> 

        <a href="http://www.onetechsearch.com/tech/category/IT/?search=&images=1&to=&cat=IT&popular">Most Popular</a> 


     </div>    
    </div>   
</div>   
</form> 


</div> 

       <div id="footer"> 
      <ul id="footer-col3"> 
       <?php dynamic_sidebar('Footer 1'); ?> 
       <?php dynamic_sidebar('Footer 2'); ?> 
       <?php dynamic_sidebar('Footer 3'); ?> 
      </ul> 
      </div> 

CSS：

#footer { 
    bottom: 0; 
    clear: both; 
    position: absolute; 
    text-align: center; 
    width: 96%; 
    padding:2%; 
    background-color:rgba(139, 140, 0, 0.6); 
    } 

#footer p{padding:14px 0;margin: 0; color: #999; text-align:center; font-size:12px;} 

#footer #footer-col3{ 
    /*width:960px;*/ 
    margin:0 auto; 
    overflow:hidden; 
} 
#footer #footer-col3 li.widget{ 
    list-style-type:none; 
    float:left; 
    width:32%; 
    text-align:left; 
} 
#footer #footer-col3 li.widget h2{ 
    font-size:14px; 
    color:#ddd; 
    padding:10px 0; 
    margin:0 50px 10px 0; 
    border-bottom:1px dashed #555; 
} 
#footer #footer-col3 li.widget li { 
    list-style-type:none; 
    padding: 1px 0; 
} 
#footer #footer-col3 li.widget li a{ 
    color:#bbb; 
    font-size:12px; 
} 
#footer #footer-col3 li.widget li a:hover{ 
    color:#fff; 
} 
#footer #footer-col3 #social-icons-widget-2 {width:60%;} 

ページネーション：

#pagination { 
    display:block; 
     text-align:center; 
    margin-bottom: 70px; 
     margin:0 auto; 
     clear:both; 
     padding: 0.4% 0; 
     background-color: rgb(255, 255, 255); 
     color:#999; 
     font-size: 11px; 
     text-transform:uppercase;} 

#pagination a.pag-right { 
     border:1px solid #ddd; 
    padding:4px 8px; 
    color:#828282; 
    background-color: rgb(255, 255, 255); 
    -moz-border-radius: 12px; 
    -khtml-border-radius: 12px; 
    -webkit-border-radius: 12px; 
    border-radius: 12px; 
} 
#pagination a, 
#pagination span{ 
    width:33%; 
    text-align:center; 
    font-size:1.2em; 
    text-transform:capitalize; 
    border:1px solid #ddd; 
    padding:4px 8px; 
    color:#828282; 
    background-color: rgb(255, 255, 255); 
    -moz-border-radius: 12px; 
    -khtml-border-radius: 12px; 
    -webkit-border-radius: 12px; 
    border-radius: 12px; 
    font-family:"Arial", sans-serif; 
    display:inline-block; 
    padding:0.5em 0; 

} 

Answer 1

あなたのフッターが上書きされます。静的なフッタをウィンドウの下部に配置する場合は、フッターのCSSを編集してZ-インデックスを追加します。

#footer { 
bottom: 0; 
clear: both; 
position: absolute; 
text-align: center; 
width: 96%; 
padding:2%; 
background-color:rgba(139, 140, 0, 0.6); 
z-index:1000; 
} 

Answer 2

それを試してみてください -

#footer { 
    clear: both; 
    position: relative; 
    z-index: 10; 
    height: 3em; 
    margin-top: -3em; 
} 

Answer 3

このお試しください：私はフッターが表示されないために発生しているPHPのエラーが、あると思い

#footer { 
    text-align: center; 
    width: 96%; 
    padding: 2%; 
    background-color: rgba(139, 140, 0, 0.6); 
    z-index: +1; 
    position: fixed; 
    bottom: 0; 
}