我正在尝试按照此处的建议实现粘性页脚:
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 © 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 :(得分:0)