css - 我想制作一个粘性页脚，但长页面很难做到

所以，我正在制作一个个人网站，但我很难创建一个粘性页脚。我希望页脚留在页面底部。 Here's an example.顺便说一句，我对网页设计和开发还是很陌生，所以我的做法可能不是最好的!

html * {
  font-size: 14pt !important;
  font-family: 'Work Sans', sans-serif;
}

* {
  margin: 0;
}

body {
  height: 100%;
}

:root {
  --theme: #6600da;
}

.row {
  width: 100%;
  height: 65%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  /* border: 3px solid red; */
}

.navbar-image {
  border-radius: 50%;
}

.column {
  float: left;
  border: 1px black solid;
  padding: 5px;
  margin: 5px;
  /* position: relative; */
}

.left,
.right,
.middle {
  display: inline-block;
  margin: 2px;
  top: 0;
  text-align: center;
}

.left {
  width: 25%;
  font-size: 14pt !important;
}

.left img {
  border-radius: 50%;
  height: 15%;
  width: 15%;
  margin-left: 10px;
}

.header img {
  padding-top: 5px;
  float: left;
}

.header h3 {
  text-decoration: underline;
}

.header h4 {
  color: var(--theme);
  font-weight: 100;
  margin: 0px;
}

.header h3,
h4 {
  margin: 0;
  float: left;
  padding-left: 15px;
}

.middle {
  width: 45%;
}

.right {
  width: 25%;
  text-align: justify;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.footer {
  left: 0;
  bottom: 0;
  width: 100%;
  background: #222;
  color: white;
  text-align: center;
  height: 60px;
  clear: both;
}

.center {
  padding-top: 15px;
}

.proj {
  border: 1px black solid;
  padding: 30px;
  margin: 10px;
  margin-top: 0;
}

.proj img {
  width: 60px;
  height: 60px;
  border: 2px black solid;
  display: inline-block;
}

.proj h3 {
  text-decoration: underline;
  margin: 0;
  display: inline-block;
}

.proj p {
  margin-top: 3px;
}

#footer-text {
  color: #7d7d7d;
  font-size: 10pt !important;
  text-decoration: underline;
}

#footer-link {
  color: #7d7d7d;
  font-size: 10pt !important;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Steve Tautonico</title>
  <link rel="stylesheet" type="text/css" href="home.css">
  <script src="home.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- Include Google F -->
  <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

</head>

<body>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <img class="navbar-brand navbar-image" src="pictures/stock.jpg" />
        <a class="navbar-brand" href="#">Steve Tautonico</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Projects
            <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">T.A.R.B.S. Engine</a></li>
            <li><a href="#">Termutils</a></li>
            <li><a href="#">SBS</a></li>
          </ul>
        </li>
        <li><a href="#">Contact Me</a></li>
      </ul>
    </div>
  </nav>

  <br /><br /><br />

  <div class="row">
    <div class="column left">
      <div class="header">
        <img src="pictures\stock.jpg" />
        <br />
        <h3>Steve Tautonico</h3>
        <br />
        <h4>CST Student, Developer, IT Technician</h4>
        <br /><br />
        <p>
          Lorem ipsum dolor sit amet, consequat mauris condimentum amet, volutpat est diam purus, nunc sapien a felis magnam vel, tellus praesent urna accumsan, rutrum risus mollis. Urna iaculis sem sagittis volutpat massa facilisis, erat eget feugiat orci odio,
          a consectetuer, pharetra sed. Mollis vel placerat maecenas. Est nascetur wisi purus quisque at ante, nec parturient at cras vel sed. Sodales vehicula amet, hymenaeos neque suspendisse.

        </p>
      </div>
    </div>

    <div class="column middle">
      Lorem ipsum dolor sit amet, semper non dictum lobortis at pellentesque, rutrum et urna. Elit mauris vestibulum ad, hendrerit facilisis, donec libero, turpis id, curabitur arcu amet a dolor vulputate egestas. Wisi arcu mauris amet sit nullam auctor, tempus
      nisl duis. Pede consequat phasellus fermentum laboriosam facilisi vehicula. Dolor donec, ut vulputate a suspendisse, ipsum ut sollicitudin justo aliquam venenatis, odio nam nulla ligula varius, tempor tellus et ante placerat. Mauris pede torquent,
      tristique ut tempus, viverra laoreet. Purus litora ac sodales venenatis vitae, ante curabitur porttitor. Leo quis risus, est duis, metus tellus pretium libero a, adipiscing vestibulum, earum donec mattis. Libero lacus morbi vitae nec faucibus orci.
      Sit erat, proin lorem duis. Sit libero semper turpis leo. Fames nostra luctus urna amet vitae sagittis, mauris velit leo nonummy ut, etiam vehicula nam nam morbi mauris. Justo convallis diam donec, sit nunc vitae integer, neque ipsum ut in, sed
      cursus sollicitudin ante a. Nec dapibus penatibus sagittis lorem, sem ut, rutrum dignissim, ipsum justo. Tellus semper mi eget dapibus curabitur, eget duis. Ullamcorper feugiat, quae in eget, sem vitae sit nulla aliquam curabitur ante, diam mattis
      ornare quis sed non wisi. In donec amet. Vestibulum leo a. Magnis tincidunt justo pharetra a aenean. Erat ipsum, leo nibh aliquam pede, mi pulvinar odio tortor molestie vero etiam, adipiscing donec class arcu, sem placerat et omnis. Vel felis donec,
      maecenas tellus blandit convallis pharetra erat ac, rutrum eleifend tempor ultricies. Suspendisse nulla nisl commodo suscipit massa volutpat. Orci dolor urna neque, tempus penatibus proin sapien dictum ut placerat, est per sit turpis a. Duis gravida
      in massa id, nascetur leo augue. Ante amet diam, condimentum aenean semper velit sed risus interdum, sem luctus imperdiet vestibulum fringilla. Quas suspendisse augue est metus malesuada magnis, suscipit a interdum, rutrum ipsum. Vitae consectetuer
      ac ut lacinia pellentesque laoreet. Fames in libero porttitor, suspendisse luctus imperdiet ligula fermentum tincidunt, malesuada dolor vestibulum eget pretium, amet parturient cursus sed vel, eget neque dui purus per duis. Mattis enim dapibus,
      fringilla justo lectus sapien mi primis, tincidunt fusce parturient sed et pellentesque, dapibus morbi condimentum, nec gravida feugiat ornare et fames ligula.
    </div>

    <div class="column right">
      <br />

      <div class="proj proj1">
        <img src="pictures\stock.jpg" />
        <h3>Project 1 title</h3>
        <br />
        <p>Lorem ipsum dolor sit amet, integer orci odio ut. In faucibus vestibulum eget mollis dui, justo gravida. Maecenas et neque montes, ut wisi est odio placerat cursus.</p>
      </div>

      <br />

      <div class="proj proj2">
        <img src="pictures\stock.jpg" />
        <h3>Project 2 title</h3>
        <br />
        <p>Lorem ipsum dolor sit amet, viverra molestie justo urna eu lectus, justo vitae quam eu vitae lacinia, massa elementum nec platea eget quisque amet. Nunc ac elit. Ultricies suscipit phasellus turpis, a cursus donec nulla dignissim mi, ac vitae
          gravida, neque odio sapien, eget velit sed ac pellentesque.</p>
      </div>

      <br />

      <div class="proj proj3">
        <img src="pictures\stock.jpg" />
        <h3>Project 3 title</h3>
        <br />
        <p>Lorem ipsum dolor sit amet, id turpis dui arcu urna bibendum, sit vitae pellentesque non sodales quam eros, laudantium est tempor nullam, sit suscipit nec erat ornare vivamus libero. Libero fermentum donec dolor nisl non, felis diam mus sed ac,
          aliquet vitae risus facilisis purus cursus leo. Sed aliquam molestie odio vivamus, sit lorem id a sed ligula cras, volutpat volutpat dolor non velit, at ullamcorper euismod aliquet.</p>
      </div>

      <br />

      <div class="proj proj4">
        <img src="pictures\stock.jpg" />
        <h3>Project 4 title</h3>
        <br />
        <p>Lorem ipsum dolor sit amet, quam tortor. Amet proin, ac risus nunc sodales urna ac bibendum. Id justo adipiscing morbi non potenti, massa ullamcorper mus urna commodo ultrices gravida, neque dui orci potenti maecenas.
        </p>
      </div>

      <br />

    </div>

    <!-- Footer -->
    <br /><br />

    <div class="footer">
      <div class="ml-auto center">
        <span id="footer-text">Steve Tautonico</span>
        <span>•</span>
        <a href="#" id="footer-link">Projects</a>
        <span>•</span>
        <a href="#" id="footer-link">Contact Me</a>
      </div>
    </div>

</body>

</html>

如果运行此代码，您会看到页脚固定在页面的右侧。我尝试使用互联网上的一些示例，但页脚通常悬停在页面中间附近的某个地方。当我添加第三列时，问题似乎开始了。一旦我开始将内容和信息添加到第三列(最右边的一列)中，页脚就坏了。我在这里做错了什么？

最佳答案

您忘记关闭您的行 div:

    </div>
  </div><!-- close row -->
<!-- Footer -->
<br /><br />

脚本中的错误几乎总是由您忽略的小问题引起的。计算打开/关闭标签是一个养成的好习惯，也是您首先要检查的地方之一。

然后，为了使其具有粘性，将这些行添加到您的 CSS .footer 类中:

.footer {
   position: -webkit-sticky; /* Safari */
   position: sticky;
   left: 0;  ... etc....

关于css - 我想制作一个粘性页脚，但长页面很难做到，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53544284/

css - 我想制作一个粘性页脚，但长页面很难做到

上一篇：php - Bootstrap 的文本格式问题

下一篇：html - 具有动态大小的列表