無法定位頁腳CSS
[英]cannot position a footer CSS
問題描述
我正在使用本教程制作頁腳，但結果並不像預期的那樣：
我的html和css都在這個JSFiddle中
或以下：
<body>
<div class="wrapper">
<div id="container">
<div id="header">
<div class="wrap">
<div id="menuProfile">
<div id="logotext">K-Panel • Kerio Tools Management</div>
</div>
</div>
</div>
<div class="fix"></div>
<div id="subheader">
<div id="submenu" class="wrap">
<div id="logocliente">
<a href="<?php echo $this->baseUrl(); ?>/"><img height="50"
id="logoIscrittoTestata"
src="<?php echo $this->baseUrl(); ?>/KPanel_logo_2014_58x224.png"></a>
</div>
</div>
</div>
<div class="fix separatore"></div>
<div id="page">
<div id="right">
</div>
</div>
<div id="push"></div></div>
<div id="footer">
<strong>Freelands</strong> > Via Emilia Ponente, 479, 40132 Bologna (Italy) > Tel +39 051 7402558 > Fax +39 051 729153 > C.F. e P.IVA 03236491209 > <a
id="footerEmailAzienda" href="mailto:info@freelands.it">info@freelands.it</a>
</div>
CSS：
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: middle;
background: transparent;
}
body {
font-family: Helvetica, Verdana, Arial, Tahoma;
font-size: 11px;
line-height: 1;
text-align: center;
color: #404040;
}
html,body {
height: 100%;
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#footer {
background-color: #0082C0;
color: #FFFFFF;
padding-top: 15px;
}
* {
margin: 0;
}
body, html {
width: 100%;
height: 100%;
font-size: 16px;
font-family: calibri, gill sans, arial;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -35px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 35px; /* .push must be the same height as .footer */
}
#footer{
font-size: 12px;
font-family: calibri, gill sans, arial;
color: black;
text-align: center;
width: 100%;
}
#header{
display:block;
clear:both;
margin-top:20px;
}
2 個解決方案
解決方案1
1 已采納 2014-02-21 14:31:34
你需要添加一個position:fixed; 到頁腳保持固定。 要使其保持在底部，請添加一個bottom:0;
守則變更：
#footer{
font-size: 12px;
font-family: calibri, gill sans, arial;
color: black;
text-align: center;
width: 100%;
position:fixed;
bottom:0px;
}
希望這可以幫助。
解決方案2
1 2014-02-21 14:34:54
為了在底部粘貼你的頁腳，你需要將它position:fixed bottom:0; 並添加margin-top:(height of your footer);
#footer {
background-color: #0082C0;
color: #FFFFFF;
padding-top: 15px;
position:fixed;
bottom:0;
margin-top:30px; /* height of the footer */
}
CSS頁腳位置錯誤
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.