如何解决即使使用了此处列出的CSS,页脚也会浮动到顶部
| 我已经尝试过该站点和其他站点上列出的所有CSS,但无法在页面底部显示页脚...现在,它浮在页面的上半部分。下面是我的CSS;它可能有很多多余的东西,因为我已经尝试了所有方法,这是我的第一个站点。 请参阅:www.medsocialgroup.com 谢谢! 的CSS<!-- language: lang-css -->
body {
text-align: center;
background-color: #FFF;
font-family: Verdana,Geneva,sans-serif;
color: #333;
background-image: url(dropshadow.jpg);
background-repeat: repeat-y;
background-position: center center;
margin:0;
padding:0;
height:100%;
}
div.wrapper
{
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top:20px;
width:790px;
min-height:100%;
height:auto
height: 100%
background-color: #FFF;
font-family: Verdana,sans-serif;
}
#medcommunity{
font-size:36px;
color: #999;
}
#left_column{
float:left;
margin-left:0px;
width:390px;
height:420px;
border-right-width: thin;
border-right-style: double;
border-right-color: #CCC;
}
#logo{
float:left;
clear:left;
margin-top:100px;
margin-left:0px;
}
#right_column{
float:right;
padding:0;
width:385px;
height:420px;
font-family: Verdana,sans-serif;
color: #333;
font-size: 16px;
text-align: left;
}
#webtext{
margin-top:75px;
font-size: 20px;
}
#menu{
background-color:#CCC;
width:100%;
height:40px;
margin-top:50px;
padding-top: 20px;
font-family: Verdana,sans-serif;
font-size: 20px;
font-weight: lighter;
text-align: center;
background-position: center center;
color: #FFF;
}
#footer{
background-color:#CCC;
width: 100%;
height:50px;
color: #CCC;
border-top-width: thin;
border-top-style: double;
border-top-color: #999;
text-align: center;
}
解决方法
如果在页脚div上使用
clear:both;
,将有助于将页脚推至底部,但由于某种原因它仍不会完全下降,我不知道为什么。
另外,如果您使用以下规则而不是我上面建议的ѭ1,
#footer {
background-color: #CCCCCC;
border-top: thin double #999999;
color: #CCCCCC;
height: 50px;
/* Try these new ones */
left: 0;
bottom: 0;
position: absolute;
width: 100%;
}
页脚似乎下降到了底部。但这仅在Firefox 5中有效,我在Chrome中尝试了该功能,但在那儿不起作用。我尝试过像Chrome和Firefox 5中建议的@mu那样的position: fixed;
,但它确实可行,但是您必须指定width: 100%
。这样做的问题是页脚固定在浏览器视口的底部,因此,如果您调整浏览器的大小并使窗口变短,则页脚会随视口的底部边缘移动,我认为您不需要。
, 使用Ryan Fait的Sticky Footer,我想到了这个:
http://jfcoder.com/test/medsocial.html
这些是我添加或更改的样式:
/* Sticky Footer by Ryan Fait http://ryanfait.com/ */
* {
margin: 0;
}
html,body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -39px; /* the bottom margin is the negative value of the footer\'s height */
}
#footer,.push {
height: 39px; /* .push must be the same height as #footer */
clear: both;
}
/* Other styles that help fix the top */
.wrapper {
margin-top: 0 !important;
}
#menu {
background-color:#fff;
margin-top: 0;
padding-top: 50px;
}
#menu div {
background-color:#CCC;
width:100%;
height:40px;
padding-top: 20px;
font-family: Verdana,Geneva,sans-serif;
font-size: 20px;
font-weight: lighter;
text-align: center;
background-position: center center;
color: #FFF;
}
#medcommunity {
margin-top: 55px;
}
和标记(注意添加的“ 7”):
<body>
<div class=\"wrapper\">
<div id=\"menu\"><div>HOME | HOW IT WORKS | SERVICES | CONTACT US</div></div>
<div id=\"medcommunity\"><p>medical + community</p></div>
<div id=\"left_column\"><img src=\"msgrouptransp.png\" id=\"logo\" width=\"325\" height=\"120\" alt=\"medsocial\" /></div>
<div id=\"right_column\">
<p id=\"webtext\">Social Media Solutions for the Medical Community</p>
<p>We help Hospitals,Medical Groups,Physicians,and more to connect with their communities via Facebook,Twitter,and other social media sites. </p>
<p>Find out <u>How it Works</u>.</p>
</div>
<div class=\"push\"></div>
</div>
<div id=\"footer\"></div>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。