html - 如何让页脚位于页面底部？-6ren

html - 如何让页脚位于页面底部？

转载作者：行者123 更新时间：2023-11-28 04:43:19

如何修复页脚并将其保持在底部？我尝试了 bottom:0; 和其他一些方法，但没有成功，实现此目标的最佳方法是什么？

https://jsfiddle.net/94wgz07s/

<!DOCTYPE html>
<html>

    <head>
        <title>A. Willi A.G - Fachkräft für Rohr-Stahl Gebäudetechnik</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <link rel="stylesheet" href="2.css">
        <link rel="icon" type="image/ico" href="/images/favicon.png"/>
    </head>
    <body>
        <div id="banner">
        <img src="/images/logo.png">
        </div>


<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="/html/contact.html">Kontakt</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Bewerber</a>
    <div class="dropdown-content">
      <a href="#">Info</a>
      <a href="#">Jobs</a>
    </div>
  </li>
     <li class="dropdown">
        <a href="#" class="dropbtn">Kunde</a>
        <div class="dropdown-content">
             <a href="/html/personnel.html">Personalverleih</a>
                 <a href="/html/rental.html">Werkzeuge Mieten</a>
                    <a href="/html/refrences.html">Referenzen</a>
                 <a href="/html/quali.html">Qulität, Sicherheit und Weiterbildung</a>
         </div>
    </li>
</ul>


        <p>
            Die A. Willi AG ist als Personalverleiher mit über 35-jähriger Erfahrung in der ganzen Schweiz und im Ausland erfolgreich tätig. 
        </p>

        <p>
            Wir bringen erfahrene Arbeitskräfte und anspruchsvolle Kunden zusammen. Derzeit sind über 100 Arbeitnehmer für die A. Willi AG im Einsatz. 
        </p>



        <p>
           Wir haben uns spezialisiert auf dem Verleih von qualifiziertem Fachpersonal in den Bereichen Rohr – Stahl – Gebäudetechnik. Für die Beratung und Vermittlung sind in diesen Gebieten ausgewiesene Fachleute zuständig, welche als kompetente Partner mit unseren Kunden gemeinsam den Personaleinsatz planen.
        </p>


        <p>
            Unsere Kunden schätzen die hohe Qualität unserer Dienstleistungen und die auf langfristigen Erfolg und faire Partnerschaft ausgerichtete Strategie. 

        </p>

        <div class="image1">
        <img alt="A screenshot showing CSS Quick Edit" src="/images/3.png" width="100%" height="40%" />
        </div>

        </a>

        <p>
            Wir suchen laufend hoch qualifiziertes Fachpersonal mit ausgewiesener Berufserfahrung. Wir bieten ihnen, Faire Anstellungsbedingungen, kostenlose Arbeitsbekleidung und PSA Ausrüstung, Weiterbildung in Beruf und Sicherheit.
        </p>
        <p>
            Unsere Dienstleistungen verbessern wir kontinuierlich, um unseren Kunden einen Qualitativen, zuverlässigen und individuellen Service zu bieten.
        </p>


        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>

        <p>
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>


        <p>
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>

        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>

        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>

        <p>
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>


        <div id="content_footer"></div>
         <div id="footer">
         <p><a href="index.html">&copy; A.Willi A.G</a> | <a href="examples.html">Wasgenring 94</a> | <a href="page.html">CH-4055 Basel</a> | <a href="another_page.html">admin@awilli-ag.ch</a> | <a href="contact.html">Kontakt Aufnehmen</a></p>

    </div>

    </body>
</html>

CSS

html {
    background: lightgrey;
    -webkit-font-smoothing: antialiased;

}

body {
    background: #fff;
    color: black;
    font-family: "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 900px;
    padding: 2em 0.5em 4em;
}



h2 {
    margin-top: 1.3em;
}




samp {
    display: none;
}

img {
    background: transparent;
    display: block;
    margin: 1.3em auto;
    max-width: 100%;
}




ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: -2%;


}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #333;
 color: darkgray;
  text-decoration: none;}


li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: whitesmoke;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}



#banner {
    margin-top: -8%;
    width:100%;
    min-height:189px;
}


#footer
{ width: 100%;
  font-family: 'Helvetica', sans-serif;
  font-size: 100%;
  height: 80px;
  padding: 28px 0 5px 0;
  text-align: center; 
  background: #333;
  border-top: 2px solid #333;
  color: #FFF;
  bottom: 0;
  left: 0;

}

#footer p
{ line-height: 1.7em;
  padding: 0 0 10px 0;}

#footer a
{ color: #FFF;
  text-decoration: none;}

#footer a:hover
{ color: darkgray;
  text-decoration: none;}

最佳答案

如果在底部你的意思是删除那个间距。

删除 bottom: 0;并添加 position: absolute;

如果不是，那么就像 Ron Basco 所说的那样，使用 position: fixed;并根据 padding: 2em 0.5em 9em; 调整您的填充

关于html - 如何让页脚位于页面底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41093392/

文章推荐： c# - 我可以将 HTML 代码放在标签中以显示在我的页面中吗？

文章推荐： javascript - 鼠标悬停在列表项上

javascript - 位于 for-each 中的记录器的引用错误
我正在使用 javascript 并有以下类: const Product = require('../models').Product class ProductService { cons
Django NoReverseMatch 位于/display/
我正在开发一个简单的应用程序，宠物用户可以在其中创建关于他们宠物的板并在板上显示图片。我正在尝试创建一个功能，用户可以点击他们的图板，将他们重定向到他们的图板，该图板将显示他们所有的宠物图片。当我
javascript - $.ajax 位于 $.each 阻塞浏览器中
我有这样的事情:循环遍历 ids，并对每个 ids 向服务器(同一域)发出 ajax 请求 (async:true) 并将接收到的数据附加到 DOM 元素。这不是一项艰巨的任务，它确实有效。示例代码:
python - Django NoReverseMatch 位于/
我正在尝试使用 Pillow 在我的网络应用程序中添加用户可上传的图像。我创建了一个 Django Upload 模型并将其注册到 Admin 中。当我使用管理控制台添加照片后，我收到以下错误。最初该
C:位于 "printf"的神秘核心转储
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
swift - 位于 View 顶部的导航栏
说到 UINavigationBar 时我有点困惑。我以编程方式设置它，它的作用是将我的 viewController 向下推(因此在启动应用程序后看不到 Storyboard中看到的 View 底部
MySQL - GROUP_CONCAT 位于 WHERE |小于或大于值
我有以下查询，它可以满足我的要求，并显示从出生日期转换而来的人们的年龄。但我现在想通过说大于或小于这些年龄来缩小结果范围，但我不知道该怎么做。 SELECT u.`id` as `user_id`
java - 位于 ListView 行中的按钮总是在最后一行触发
我有一个 ListView (不是 recyclerView)，其中每一行都有一个按钮、几个 TextView 和一个 EditText。单击特定按钮(“editTremp”)后，我希望 EditTe
ios - 位于 cellAtIndexPath 中的查询
我的 cellAtIndexPath 中有一个查询。正如常见的那样，此查询从单元格行索引处的数组中获取对象。我想知道每次加载 tableView 时是否只有一个查询，还是将其算作每个 indexPat
css - 位于 float 元素旁边时的列表项剪辑
我目前正在探索 http://www.ecovivo.be/rubriek/food 上使用的模板中的错误. 问题:访问该链接时，您会注意到右侧有一个带有内容的大型 float 图像。现在一切正常。但
arrays - 数组和删除的地址(位于 :) IOS
我在 ViewController 之间通过引用传递特定模型的数组。如果我更改数组中特定元素的任何值，它会在所有 ViewController 中很好地反射(reflect)，但是当我从该数组中删除
html - 位于 svg 上方的元素不可点击
svg 包含更多元素，其中之一是下拉选择器。我遇到的问题是选择器只能在其顶部边缘被点击，而不能在选择器的其他任何地方被点击。选择器称为 yp-date-range-selector。在下一张图片中，
html - 位于 flex 容器中心的按钮太窄
我的元素使用 20 行 20 列的 css 网格布局(每个单元格占屏幕的 5%)。其中一个页面有一个按钮。最初该页面包含在网格第 5-8 列和网格第 6-9 行中，按钮本身没有问题，但我需要将其居中放
jquery - 位于 div 中心的图像未知高度宽度
我想使用 CSS Trick 使图像居中.但是如果图像大小是随机的(不固定的)怎么办。令人惊讶的是，我不想保持图像响应，我想在不改变其宽度或高度(实际像素)的情况下将图像置于中心。下面是我的代码:
python - NoReverseMatch 位于/产品/
我正在尝试在网址之间进行路由。产品是一个类: from django.db import models from django.urls import reverse # Create your mo
python - NoReverseMatch 位于/polls/
我正在通过查看 Django 教程来制作网站。我收到一个错误: NoReverseMatch at /polls/ Reverse for 'index' with no arguments not
python - TemplateDoesNotExist 位于/polls/
我一直在试用 Django 教程 Django Tutorial Page 3并遇到了这个错误 "TemplateDoesNotExist at /polls/ " . 我假设问题出在我的代码指向模板
ios - 位于 IB 中可见但在运行时中不可见的单独包中的资源
我有一个应用程序，其中大部分图像资源都存储在单独的资源包中(这样做是有正当理由的)。这个资源包与主应用程序包一起添加到项目中，当我在 Interface Builder 中设计我的 NIB 时，所有这
ios - KERN_INVALID_ADDRESS 位于 0x0000000000000000
我使用 Xcode 6.3.2 开发了一个 iPad 应用程序。我将我的应用程序提交到 App Store 进行审核，但由于崩溃而被拒绝。以下是来自 iTunes 的崩溃报告。 Incident Id
html - 位于 div 顶部的伪元素水平滚动条
我正在使用以下内容来显示水平滚动条: CSS: div { width: 300px; overflow-x: scroll; } div::-webkit-scrollbar {

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何让页脚位于页面底部？