Question

我有一些麻烦让我的页脚保持在我的页面底部，我在各种网站上查找了相当多的东西，但我找不到任何解决方案，因为它只会卡在同一个地方，这就是我的屏幕底部而不是页面。

我要在这里尝试实现的是，如果页面上的内容比屏幕上的内容多，那么页脚将会下到页面的底部，但如果页面内容不够，则会只是出现在屏幕的底部。

这是我的HTML：

<body>
<div id="header">
    <div class="clear"></div>
        <div id="fotowlogo"><a href="Home.html"><img src="Fotos/Logo.png"></a></div>

        <ul id="headtext">
            <li class="text"><a href="Home.html">HOME</a></li>
            <li class="text"><a href="#">NEWS</a></li>
            <li class="text"><a href="ProjectInfo.html">PROJECT INFO</a></li>
            <li class="text"><a href="#">TOOLKIT</a></li>
            <li class="text"><a href="#">PARTNERS</a></li>
            <li class="text"><a href="#">GALLERY</a></li>
            <li class="text"><a href="#">CONTACT</a></li>
        </ul>
</div>
    <div class="clear"></div>
    <div id="container">
<div class="line-separator"></div>
<div class="clear"></div>
<div id="erasmus" style="width=50%;"><img src="Fotos/Erasmus.png"></div>
<p class="Erasmous">This project has been funded with support from the European Commission. This publication reflects the views only of the author, and the Commission cannot be held responsible for any use which may be made of the information contained therein.</p>
<div class="clear"></div></div>
<div id="footer"><p class="ptext">Copyright © 2017 DIDO</p></div>

这是我的CSS：

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

#container{
background-color:#F1F1F1;
margin: auto;
height: auto;
}

#header{
    background-color:#FFFFFF;
    height: 115px;
    width: 100%;
}

#fotowlogo{
    width: 14.5em;
    margin: 15px auto;
    float: left;
    padding: 0px 0px 0px 450px;
}

#footer{
    background-color:#FFFFFF;
    height: 60px;
    margin: 0px;
    position: absolute;
    overflow: hidden;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0px 10px 5px 8px black;
}
.line-separator{
    height:1px;
    background:#BBBBBB;
    width: 1800px;
    margin: 20px 0px 20px 60px;
}

#erasmus{
/*  background-image: url(../Fotos/Erasmus.png);*/
    width: 565px;
    height: 161px;
    margin: 10px 0px 10px 425px;
}

.Erasmous{
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-size: 14px;
    line-height: 24px;
    float:right;
    position: relative;
    width: 564px;
    margin: -140px 350px 0px 0px;
}

#headtext{
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-size: 15px;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

#headtext li{
    list-style-type: none;
    text-align: center;
    float: left;
    margin: 50px 0px 0px 40px;
}

.text a:link{
    text-decoration: none;
    color: black;
}

.text a:visited{
    color: darkgrey;
}

.text a:hover{
    color: darkgrey;
}

.ptext{
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-size: 10px;
    color: black;
    margin: 22px 0px 22px 450px;
    padding: 22px 0px 0px 0px;
}

请原谅我的长码，但我不知道我会在这里放什么，我是学生，我现在还在学习。

因为我必须编辑它，因为它是一个'重复'，我已经尝试了从页面'重复'的所有内容，但它仍然无法像我在顶部解释的那样工作。

页脚不会停留在页面底部

0 个答案: