Question

我对网页的CSS有问题。模板已经从旧的更新，所以我必须从头开始写一些部分，但它没有问题，除了页脚。它＆＃34;似乎＆＃34;好吧，但是当你点击crtl时 - 很多时候你会发现页脚没有粘在页面底部，它会与其余的内容一起上升。我不太了解这一点。 jsfiddle是here。我猜这个错误是微不足道的，但我仍然需要找到它。代码如下：

 <body>
 <div id="sito">
 <div class="header">
      <div class="content">
         <div class="boxgrigio">
             <div class="content">
                 <div class="email"></div></div></div>
         <div class="contatti_elenco">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<div class="menu">
    <div class="content"></div>
 </div>
 <div class="slide">
    <div class="content">
                <div id="slideshow">
                    <div id="featured">
                    <div class="ui-tabs-panel"></div>
    </div></div></div></div>
<div class="footer">
    <div class="content"></div>
</div></div>
 </body>
 </html>

CSS非常简单，并且提供了小提琴。请帮忙！

Answer 1

您可以像这样修复页脚：

   .footer {
       position:fixed;/* change to this */
       left:0px;
       bottom:0px;
       height:--px;
       width:100%;
       background:#color;
    }

    /* IE 6 */
    * html .footer {
       position:absolute;
       top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
    }

See demo

Answer 2

在页脚类中更改position值position: fixed;

.footer{
    width:100%;
    font-size: 13px;    
    background-color: #404040;
    position: fixed;
    height:120px;
    bottom:0;
    left:0;
}

jsfiddle DEMO

Answer 3

您可以将图像设置为背景，例如正确缩放 Scalable background ...但是就你所有的html内容而言相当棘手..虽然有一些javascript选项。例如Detect zoom and scale

这假设你希望你的页面实际上是100％的视口...不只是你的页脚坚持到底...

页脚没有保持最低位置

3 个答案: