CSS / HTML - 页脚不会停留在页面底部

时间：2014-08-31 01:47:16

标签： html css footer

我一直在寻找解决方案，因为这是一个常见的问题。 对他人有用的所有“解决方案”对我没有用处:(

这是我的index.html文件的正文：

<body>
        <div id="header">
        <table width="100%" height="auto" border="0">   
    <tr>
        <td><h1 id="logo"><a href="#">WEBSITE</a></h1></td>
        <td><div id="navigation">
            <ul>
                <a href="#"><li>HOME</li></a>
                <a href="#"><li>FORUM</li></a>
                <a href="#"><li>NEWS</li></a>
                <a href="#"><li>INFORMATION</li></a>
                <a href="#"><li>GALLERY</li></a>
                <a href="#"><li>STAFF APPLICATIONS</li></a>
                <a href="#"><li>CONTACT US</li></a>
            </ul>
        </div></td></tr></table>
    </div>
    <div id="announcement">
        <center>
        <p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
        </center>
    </div>
    <div id="slider">
        <center>
        <h1>IMAGE SLIDER COMING SOON</h1>
        </center>
    </div>
    <div id="featured">
    <table width="100%" height="100%" border="0">
        <center>
        <tr>
        <!-- Column 1 -->
        <td align="center" valign="top"><div id="thumbnail">
            <img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
            <h3>Our Community, Your Community</h3>
            <p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
            <a href="#">Register</a>
        </div></td>
        <!-- Column 2 -->
        <td align="center" valign="top"><div id="thumbnail">
            <img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
            <h3>Virus & Spyware Free</h3>
            <p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
            at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
        </div></td>
        <!-- Column 3 -->
        <td align="center" valign="top"><div id="thumbnail">
            <img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
            <h3>Free Open-Source Projects</h3>
            <p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
            are open-sourced which means the source code is available to the public to use however they want as long as they leave
            credits in the project that they created! The projects we create can range between Websites, programs and on special 
            occasions, games.</p>
            <a href="#">Read More</a>
        </div></td>
        </center>
    </div>
    <div id="footer">
    Test
    </div>
</body>

这是我的页脚的CSS：

#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;

}

如果有人知道如何解决这个问题，那么请说，

先谢谢

唯一

4 个答案:

答案 0 :(得分：2)

我已经解决了你的问题。我为你花了更多的时间，我在页面底部找到了设置页脚的解决方案。

Live Working Demo

HTML代码： 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <table width="100%" height="auto" border="0">
            <tr>
                <td><h1 id="logo"><a href="#">WEBSITE</a></h1></td>
                <td><div id="navigation">
                    <ul>
                        <a href="#"><li>HOME</li></a>
                        <a href="#"><li>FORUM</li></a>
                        <a href="#"><li>NEWS</li></a>
                        <a href="#"><li>INFORMATION</li></a>
                        <a href="#"><li>GALLERY</li></a>
                        <a href="#"><li>STAFF APPLICATIONS</li></a>
                        <a href="#"><li>CONTACT US</li></a>
                    </ul>
                </div></td></tr></table>
    </div>
    <div id="content">
        <div id="announcement">
            <center>
                <p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
            </center>
        </div>
        <div id="slider">
            <center>
                <h1>IMAGE SLIDER COMING SOON</h1>
            </center>
        </div>
        <div id="featured">
            <table width="100%" height="100%" border="0">
                <center>
                    <tr>
                        <!-- Column 1 -->
                        <td align="center" valign="top"><div id="thumbnail">
                            <img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
                            <h3>Our Community, Your Community</h3>
                            <p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
                            <a href="#">Register</a>
                        </div></td>
                        <!-- Column 2 -->
                        <td align="center" valign="top"><div id="thumbnail">
                            <img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
                            <h3>Virus & Spyware Free</h3>
                            <p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
                                at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
                        </div></td>
                        <!-- Column 3 -->
                        <td align="center" valign="top"><div id="thumbnail">
                            <img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
                            <h3>Free Open-Source Projects</h3>
                            <p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
                                are open-sourced which means the source code is available to the public to use however they want as long as they leave
                                credits in the project that they created! The projects we create can range between Websites, programs and on special
                                occasions, games.</p>
                            <a href="#">Read More</a>
                        </div></td>
                </center>
        </div>
    </div>
    <div id="footer">
    This is footer Section
    </div>
</div>
</body>
</html>

CSS代码： 

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:white;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:red;
    color:white;
}

<强>结果：

Result

答案 1 :(得分：1)

我不确定你要做什么。您是否正在寻找页面底部不可移动的页脚，以便当页面的其余部分滚动时它不会？或者您是否希望将页脚保持在桌面下方，并将其与网站的其余部分一起滚动？

如果您正在寻找前者，则需要将“relative”更改为“absolute”，并确保左，右和下边距设置为0.

如果你只想让页脚留在桌子下面，那么需要剩下的代码来看看它是如何与其他元素及其CSS样式进行交互的。

答案 2 :(得分：1)

了解定位访问http://www.w3schools.com/css/css_positioning.asp

我运行了你的代码，相对定位在我的Chrome浏览器上运行正常。请设置页面正文元素的位置，使其相对。

1.将您的css代码更改为

#footer {
clear: both;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
position:relative; //or any of the other positions as per your page
}

2.你可以做的更多事情是将你的页脚样式设置为内联样式，如此

<div style="clear:both;z-index:10; height:3em; margin-top:-3em; background-color:red; position:relative;">
Test
</div>

3.如果内联样式不起作用，则内部样式在 head 标记中嵌入的样式标记中设置页脚样式

4.您需要将div标签保留在主div标签之外。将它作为一个单独的元素而不是另一个元素的子元素。在处理我的项目时，我遇到了类似的问题，并且更改标签位置和身体结构也有帮助。你只需要耐心并继续尝试不同的方法。

答案 3 :(得分：0)

你没有关闭你的标签

在添加

后查看Demo 
    <html>
<head>
<style>
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
}
</style>
</head>
<body>
        <div id="header">
        <table width="100%" height="auto" border="0">   
    <tr>
        <td><h1 id="logo"><a href="#">WEBSITE</a></h1></td>
        <td><div id="navigation">
            <ul>
                <a href="#"><li>HOME</li></a>
                <a href="#"><li>FORUM</li></a>
                <a href="#"><li>NEWS</li></a>
                <a href="#"><li>INFORMATION</li></a>
                <a href="#"><li>GALLERY</li></a>
                <a href="#"><li>STAFF APPLICATIONS</li></a>
                <a href="#"><li>CONTACT US</li></a>
            </ul>
        </div></td></tr></table>
    </div>
    <div id="announcement">
        <center>
        <p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
        </center>
    </div>
    <div id="slider">
        <center>
        <h1>IMAGE SLIDER COMING SOON</h1>
        </center>
    </div>
    <div id="featured">
    <table width="100%" height="100%" border="0">
        <center>
        <tr>
        <!-- Column 1 -->
        <td align="center" valign="top"><div id="thumbnail">
            <img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
            <h3>Our Community, Your Community</h3>
            <p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
            <a href="#">Register</a>
        </div></td>
        <!-- Column 2 -->
        <td align="center" valign="top"><div id="thumbnail">
            <img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
            <h3>Virus & Spyware Free</h3>
            <p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
            at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
        </div></td>
        <!-- Column 3 -->
        <td align="center" valign="top"><div id="thumbnail">
            <img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
            <h3>Free Open-Source Projects</h3>
            <p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
            are open-sourced which means the source code is available to the public to use however they want as long as they leave
            credits in the project that they created! The projects we create can range between Websites, programs and on special 
            occasions, games.</p>
            <a href="#">Read More</a>
        </div></td>
        </center>
        </table>
    </div>
    <div id="footer">
    Test
    </div>
</body>
</html>
相关问题
最新问题