本文介绍了页脚不在页面底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在制作的网站上的页脚有问题.它不会坐在底部.我知道这是一个普遍的抱怨,但是我尝试过的所有方法都没有奏效或破坏了其他CSS元素.

I'm having issues with the footer on a site I'm making. It won't sit at the bottom. I know its a common complaint, but everything I've tried either hasn't worked or broke other CSS elements.

我已将网站加载到临时域中,供您查看.

I've loaded the website on a temp domain for you to see.

它在we-sx.com上.

It's on we-sx.com.

我希望页脚位于.container div下,该效果具有盒子阴影效果.

I want the footer to sit under the .container div which has a box-shadow effect.

推荐答案

在这里您可以找到一些代码,如下所示

here you can find some code as follows

将以下CSS行添加到样式表中..wrapper中的空白的负值与.footer和.push的高度相同.负边距应始终等于页脚的整个高度(包括您可能添加的任何填充或边框).

Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).

在CSS中:

height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

遵循此HTML结构.除非内容在CSS中绝对定位,否则.wrapper和.footer div标签之外不能包含任何内容..push div中也不应包含任何内容,因为它是一个隐藏的元素,可压入"页脚,因此不会重叠任何内容.

Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.

在HTML正文中:

您的网站内容在这里.

  <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2013</p>
    </div>

这篇关于页脚不在页面底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 08:38
查看更多