将页脚设置在网站的底部

时间：2016-11-26 09:50:28

标签： html css

我的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 { 
	
}

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

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


#extra-wrap{
    width:100%;
    white-space: nowrap;
	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) {
	#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">
		<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 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 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>

2 个答案:

答案 0 :(得分：1)

#footer {
    position: relative;
}

这应该在你的下一步按钮下面。 https://jsfiddle.net/Thielicious/ayabsLhL/

如果你想把它直接放在底部：

#footer {
    position: absolute;
}

答案 1 :(得分：0)

在您的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);

}

并将您的页脚div放在“middle_container”之后

<div id="topbar">-----</div>
<div id="middle_container">-----</div>
<div id="footer">----</div>
相关问题
最新问题