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-index。

#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

试试这个：

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

页脚在我的主页上消失

3 个答案: