在页面底部设置页脚

我的website页脚有问题。事情是，它跟随我所做的位置：固定的屏幕，但我希望它位于网站底部的NEXT页面按钮下，我该怎么做？在页面底部设置页脚


 

 
#footer { 
 
      clear: both; 
 
      margin: 0 auto; 
 
      position: fixed; 
 
      text-align: center; 
 
      height:5%; 
 
      bottom: 0; 
 
      width: 100%; 
 
      padding:2%; 
 
      z-index:500; 
 
      background-color:rgba(0, 0, 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; 
 
      display:inline; 
 
      margin-left: 2%; 
 
      float:left; 
 
      width:10%;; 
 
      text-align:left; 
 
     } 
 

 
     li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-334 a { 
 
      display: none; 
 
     } 
 

 
     #footer #footer-col3 li.widget h2{ 
 
      font-size:14px; 
 
      margin-left: 2%; 
 
      color:#ddd; 
 
      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:10%;margin-left: 2%;float:left;} 
 
    /*These are the next and previous buttons*/ 
 
    #pagination { 
 
     display:block; 
 
     margin-bottom: -142px; 
 
     text-align:center; 
 
     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%; 
 
     margin-bottom: 15%; 
 
     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; 
 

 
    }

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

 
<style type="text/css"> 
 

 
#picture-side { 
 
\t 
 
} 
 

 
#picture-side label { 
 
    color: #ffffff; 
 
} 
 

 
#extra-search a { 
 
    margin-left: 2%; 
 
} 
 

 

 
#extra-wrap{ 
 
    width:100%; 
 
    white-space: nowrap; 
 
\t overflow-x: auto; 
 
    -webkit-overflow-scrolling: touch; 
 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
 

 
    /* Firefox */ 
 
    display:-moz-box; 
 
    -moz-box-pack:center; 
 
    -moz-box-align:center; 
 

 
    /* Safari and Chrome */ 
 
    display:-webkit-box; 
 
    -webkit-box-pack:center; 
 
    -webkit-box-align:center; 
 

 
    /* W3C */ 
 
    display:box; 
 
    box-pack:center; 
 
    box-align:center; 
 
} 
 

 
#extra-search{width:100%} 
 

 
select{ 
 
    appearance:none; -moz-appearance:none; -webkit-appearance: none; 
 
    } 
 

 
.styleselect { 
 

 
    margin-right: 2%; 
 

 
    margin-left: 2%; 
 
    background-image: url("http://s21.postimg.org/nx05vn15f/dropdown_style.png"); 
 
    background-position: 117px center; 
 
    background-repeat: no-repeat; 
 
    overflow: hidden; 
 
    vertical-align: middle; 
 
    width: 140 px; 
 
    float:left; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 
.styleselect select { 
 
    background-color: transparent; 
 
    margin: 0 0 1px; 
 
    color: #ffffff; 
 
    padding: 4px; 
 
    float:left; 
 
    vertical-align: middle; 
 
    width: 140 px; 
 
} 
 
.styleselect select option{ 
 
    background-color: #DFD3C3;    
 
    overflow: hidden; 
 
    vertical-align: middle; 
 
    width: 140 px; 
 
    padding: 0; 
 
    margin: 0; 
 
    float:left; 
 
    display: inline-block; 
 
} 
 

 
@media screen and (max-width: 980px) { 
 
\t #to {display: none;}} 
 

 

 
#picture-side1 label { 
 
    color: #ffffff; 
 
} 
 

 
#picture-side1{float:left;} 
 

 
#picture-side2{float:left;} 
 

 
#picture-side{float:left; margin-left: 2%; margin-right: 2%;} 
 

 
#picture-side2 label { 
 
    color: #ffffff; 
 
} 
 

 

 
input[type="radio"]:checked+label{ border-bottom: 2px solid red; } 
 

 
.site-wrap { 
 
    display: none; 
 
} 
 
#picture { 
 
    visibility: hidden; 
 
} 
 

 
#picture2 { 
 
    visibility: hidden; 
 
} 
 

 
#video { 
 
    visibility: hidden; 
 
} 
 

 

 
#searchF label { 
 
height:40px; line-height:40px; text-align:center; 
 
margin-left: 2%; 
 
color: #ffffff; 
 

 
} 
 

 
#picture-side2 label { 
 
    margin-right: 2%; 
 
} 
 

 

 

 
#to { 
 
    margin-left: 2%; 
 
    margin-right: 2%; 
 
    float: left; 
 
    z-index: 10; 
 
    border-radius: 10px; 
 
    background-color: rgb(255, 255, 255); 
 
    color: #8a298a; 
 
} 
 

 
</style> 
 

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

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

 
    \t \t \t \t \t \t \t 
 

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

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

 
\t \t \t <div id="picture-side2"> 
 
\t \t 
 
\t \t \t \t <input type="radio" name="images" value="0" id="video" 
 
\t \t \t \t <?php if(isset($_GET["video"]) && $_GET["video"]=='1'){ echo 'checked';} ?>><label for="video">Video</label> 
 
\t \t \t </div> \t \t 
 
\t \t \t \t \t <div id="time-side"> 
 
\t \t \t \t \t \t <!--<small>Published time</small>--> 
 
\t \t \t \t \t \t <input type="text" id="to" name="to" placeholder="Any time"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="styleselect"> 
 
\t \t \t \t \t \t <select data-placeholder="Select a Category" name="cat" id="cat" class="select2" multiple > 
 
     \t \t \t \t \t \t \t <option value="all">All Categories</option> 
 
     \t \t \t \t \t \t <option value="EN">England</option> 
 
     \t \t \t \t \t \t <option value="GR">Greece</option> 
 
     \t \t \t \t \t \t <option value="US">USA</option> 
 
     \t \t \t \t \t \t <option value="IT">Italy</option> 
 
     \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <a href="http://www.onetechsearch.com/tech/category/IT/?search=&images=1&to=&cat=IT&popular">Most Popular</a> 
 
\t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t </div> \t \t \t \t 
 
\t </div> \t \t \t 
 
</div> \t \t \t 
 
</form> 
 
</div> 
 
\t <div id="footer"> 
 
\t \t \t <ul id="footer-col3"> 
 
\t \t \t \t <?php dynamic_sidebar('Footer 1'); ?> 
 
\t \t \t \t <?php dynamic_sidebar('Footer 2'); ?> 
 
\t \t \t \t <?php dynamic_sidebar('Footer 3'); ?> 
 
\t \t \t </ul> \t 
 
\t </div>

来源

2016-11-26 Johhny Sins

#footer { 
    position: relative; 
}

这应该是下方的下一步按钮。 https://jsfiddle.net/Thielicious/ayabsLhL/

如果你想直接将其放置在底部：下面类

#footer { 
    position: absolute; 
}

来源

2016-11-26 10:15:05 Thielicious

刚添加了下一个和上一个按钮的代码 –

PHP公司德有风格，我们看不到它：/ – Thielicious

只是再次更新，抱歉的误解 –

更新在你的CSS

#footer { 
clear: both; 
margin: 0 auto; 
position: relative; 
text-align: center; 
height:5%; 
/*bottom: 0;*/ 
width: 100%; 
padding:2%; 
z-index:500; 
background-color:rgba(0, 0, 0, 0.6); 

}

，并把你的页脚格 “middle_container” 后像

<div id="topbar">-----</div> 
<div id="middle_container">-----</div> 
<div id="footer">----</div>

来源

2016-11-26 10:20:11 aje

在页面底部设置页脚

回答

相关问题