我想打个页脚，但页长却很难

时间：2018-11-29 17:12:48

标签： html css twitter-bootstrap webpage

因此，我正在创建一个个人网站，并且在创建粘性页脚时遇到了困难。我希望页脚停留在页面底部。 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>

如果运行此代码，则可以看到页脚粘在页面的右侧。我尝试使用互联网上的一些示例，但是页脚通常徘徊在页面中间的某个位置。当我添加第三列时，问题似乎开始了。一旦我开始将内容和信息添加到第三列（最右边的列）中，页脚就会中断。我在这里做什么错了？

2 个答案:

答案 0 :(得分：0)

从<div class="row">删除此页脚代码，并将其放在该div之外。

<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>

答案 1 :(得分：0)

您忘记关闭行div：

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

脚本错误几乎总是由您忽略的一些小问题引起的。计数打开/关闭标签是一个好习惯，也是您检查的第一个地方。

然后，要使其具有粘性，请将这些行添加到CSS .footer类中：

.footer {
   position: -webkit-sticky; /* Safari */
   position: sticky;
   left: 0;  ... etc....
相关问题
最新问题