Question

我做了一个简单的页面，底部有固定的页脚。

我想要达到的最终结果是这样的https://www.sallyhart.photography/#

footer {
  display: inline-block;
  position: absolute;
  margin-top: -40px;
  left: 40px;
  font-family: 'Fjalla One', sans-serif;
}

/*-- Global--*/
* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  margin: 0;
}

html, body {
  height: 100%;
}

@import @import url('https://fonts.googleapis.com/css?family=Fjalla+One');

/*-- Title --*/
h1 {
  position: absolute;
  position: fixed;
  top: 30px;
  left: 40px;
  font-family: 'Fjalla One', sans-serif;
  font-weight: 400;
  color : white;
}

p {
  position: absolute;
  position: fixed;
  top: 70px;
  left: 40px;
  font-family: 'Fjalla One', sans-serif;
  font-weight: 200;
  color : white;
}

footer {
  display: inline-block;
  position: absolute;
  margin-top: -40px;
  left: 40px;
  font-family: 'Fjalla One', sans-serif;
}

footer a {
  margin-right: 15px;
  font-weight: 200;
  text-decoration: initial;
  color: white;
}


/*-- Image section--*/

section {
  width: 100%;
  height: 100%;
}


section.first {
  background-image:url("https://images.unsplash.com/photo-1552394459-917cbbffbc84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
  background-attachment: fixed;
  background-size: cover;
}

section.second {
  background-image: url("https://images.unsplash.com/photo-1552426948-96ed4eb0509c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1955&q=80");
  background-attachment: fixed;
  background-size: cover;
}

section.third {
  background-image: url("https://images.unsplash.com/photo-1551030973-c739c33a78bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1921&q=80");
  background-attachment: fixed;
  background-size: cover;
}


section.fourth {
  background-image: url("https://images.unsplash.com/photo-1552403709-27a46aab46de?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1570&q=80");
  background-attachment: fixed;
  background-size: cover;
}

section.fourth {
  background-image: url("https://images.unsplash.com/flagged/photo-1551337213-0b69f29206e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
  background-attachment: fixed;
  background-size: cover;
}

section.fifth {
  background-image: url("https://images.unsplash.com/flagged/photo-1551337213-0b69f29206e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
  background-attachment: fixed;
  background-size: cover;
}

section.sixth {
  background-image: url("https://images.unsplash.com/photo-1550668180-3205f7bb6a9e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80");
  background-attachment: fixed;
  background-size: cover;
}

<header>
  <h1>Sally Hart</h1>
  <p>Photographer and designer</p>
</header>


<section class="first"></section>
<section class="second"></section>
<section class="third"></section>
<section class="fourth"></section>
<section class="fifth"></section>
<section class="sixth"></section>

<footer>
  <a href="#">Email</a>
  <a href="#">Twitter</a>
  <a href="#">Instagram</a>
</footer>

我想使页脚停留在底部，并在滚动网页时始终显示在左下角，现在它不显示在首页上，而只显示在最后一张图像上滚动到显示的底部。

当我添加位置：固定到CSS时，整个页脚以某种方式消失了。

有人可以帮助我解决这个问题吗？

非常感谢！：-）

Answer 1

footer应该是这样的：

footer {
  display: inline-block;
  position: fixed;
  bottom: 20px;
  left: 40px;
  font-family: 'Fjalla One', sans-serif;
}

bottom: 20px和fixed。

Answer 2

将页脚的position更改为fixed。删除margin-top并添加bottom: 0;（或距屏幕底部最远的距离。）。

footer {
  display: inline-block;
  position: fixed;
  bottom: 0;
  left: 40px;
  font-family: 'Fjalla One', sans-serif;
}

Answer 3

将其固定而不是绝对固定。

footer { position: fixed; bottom: 40px; left: 40px; }

固定位置时页脚消失

3 个答案: