css - 无法定位页脚 CSS-6ren

css - 无法定位页脚 CSS

转载作者：太空宇宙更新时间：2023-11-04 04:01:52

我正在关注 this制作页脚的教程，但结果不如预期:

Footer

我的html和css都在这个JSFiddle

或以下:

  <body>
  <div class="wrapper">
<div id="container">
    <div id="header">
        <div class="wrap">
            <div id="menuProfile">
                <div id="logotext">K-Panel &bull; 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;
 }

最佳答案

您需要向页脚添加 position:fixed; 以使其保持固定。为了让它留在底部，添加一个 bottom:0;

WORKING DEMO

代码更改:

 #footer{
font-size: 12px;
font-family: calibri, gill sans, arial;
color: black;
text-align: center;
width: 100%;
    position:fixed;
    bottom:0px;
 }

希望这对您有所帮助。

关于css - 无法定位页脚 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21937096/