javascript - 无法让页脚保持向下状态(HTML/CSS 初学者)

Question

我是 HTML 和 CSS 的初学者，正在尽最大努力完成创建网页的任务，作为我正在参加的大学类(class)的作业。这是我第二次访问该网站，因为第一次非常困惑，我无法进行适当的编辑。现在我更擅长结构化，但问题是我的页脚拒绝保持向下。该网站还处于早期阶段，但它把一切搞乱了，我需要让布局正常工作才能继续。我非常感谢您提供的所有帮助。如果您不明白链接或标签的具体命名；可能是因为它是瑞典语所以不用担心。这不是胡言乱语。编码非常粗糙，但我对此很陌生。

所以，我的页脚拒绝保持向下。我相信这是由于我在试图摆脱出现的水平滚动条时所写的侧宽设置所致。 (用overflow-x:hidden;解决)。 这是我的页脚:

        <div id= "footer"><a />
            Senast uppdaterad:
        <script>
            document.write(document.lastModified) ;
        </script><a />
        <script type="text/javascript">
            var dateObj = new Date();
            document.write(dateObj.toLocaleString());
        </script>
            <a href="index.html"><img src= "house-308936_960_720.png" alt= Hem height= "25" width= "25"></a> <a href="Bildgalleri.html"><img src= "Camera-512.png" alt= Fotogalleri height= "25" width= "25"></a> <a href="mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea98838e8d8f888b8981aa888b9e9f9f868399c4998f" rel="noreferrer noopener nofollow">[email protected]</a>"><img src= "email.png" alt= <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42302b262527202321290220233637372e2b316c3127" rel="noreferrer noopener nofollow">[email protected]</a> height= 40 width= 40></a> <a href="https://www.google.se/maps/place/Lilla+Fiskaregatan+2,+222+22+Lund/@55.7032552,13.1898975,17z/data=!3m1!4b1!4m5!3m4!1s0x465397c4d42a5ba1:0xa5fe9f8023f0c562!8m2!3d55.7032522!4d13.1920862"><img src= "map.jpg" alt= Webbkarta height= "25" width= "25"></a>
            <br />
        </div>

这是我的全部 CSS:

html { 
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    }
body{
     background-color: #FFFFFF;
     width: 100%;
     height: 100%;
     overflow-x: hidden;
}
div#header{
     background-color: #FFFFFF;
     height: 100px;
     padding: 10px;
     width: 700px;
     background-position: bottom;
}
div#container{
    min-width: 900px;
    background-color: #FFFFFF;
    font-family: Calibri, sans-serif;
}
/*meny*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #e6e6e6;
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    font-family: Helvetica, sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #999999;
}

.active {
    background-color: #999999;
}
/*aside, alla taggar*/
div#asidecontainer{
     position:relative;
     top:0;
     right:0;
     float: right;

}
/*aside, alla taggar var för sig*/
div.imagesright {
    float: right;
   margin: 5px;
   padding: 5px;
   padding-bottom: 20px;
   clear: right; 
}
div.imagesright {
    float: right;
   margin: 5px;
   padding: 5px;
   padding-bottom: 20px;
   clear: right; 
}
div.imagesright {
    float: right;
   margin: 5px;
   padding: 5px;
   padding-bottom: 20px;
   clear: right; 
}
.caption {
    display: block;
}
/*samlat innehåll*/
div#content {
    width: 800px;
    height: 100px;
    margin: 20px;
    padding: 20px;
    float: left;

}
/*hundvälkommen sida1 */
div.hundvälkommen{

}
/*enbart texten i mitten*/
div#text {
    text-align: left;
    margin: 10px;
    padding: 10px;
}
/*footer*/
div#footer{
    position: bottom;

}

此外，在页脚中，我需要一件事告诉我网站上次更新的时间，一件事告诉我现在是什么时间。现在，告诉我现在几点的东西似乎正在做与时钟更新版本相同的事情。我不知道应该使用什么代码，并且尝试了在网上找到的多个版本。

感谢我收到的每一条意见!预先感谢:)。

Answer 1

html 文档中的默认布局是从左上到右下。因此，如果页面中只有页脚，除了页脚之外什么都没有，那么它将位于页面顶部。

如果您想将其固定在页面底部并且无论如何它都会保留在那里，那么您可以使用以下命令来执行此操作

position: fixed;
bottom: 0px;

第一行将使其固定在屏幕上，当您向上或向下滚动时，它将保持在同一位置。然后第二行将使它与页面底部的距离为0px。

为了编辑网页 CSS，我建议使用 google chrome 并按 F12。我添加了一张图片只是为了向您展示它有多么有用。