Question

我为＆＃34;页脚＆＃34;创建了以下HTML我的网站：

<div class="author">Made by</div>

以下作者的CSS：

.author {
opacity: 0.2;
position: fixed;
top: 45.5vw;
left: 50vw;
transform: translate(-50%, -50%);
font-size: 0.8vw;
font-family: 'Hind Vadodara', sans-serif;
color: white;
}

@media only screen and (max-width: 768px) {
.author { 
top: 90%;
left: 50%;
font-size: 2.3vw;
}
}

我已经尝试了很多，但是当我调整窗口大小时，作者会将noet留在页面底部，直到它切换到移动视图，如何让作者文本保持在底部相同的大小我调整窗口大小？

Answer 1

您需要将bottom设置为0;

  .author {
    position:absolute; 
    bottom:0;
  }

Answer 2

.author {
  opacity: 0.2;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8vw;
  font-family: 'Hind Vadodara', sans-serif;
  color: white;
}

@media only screen and (max-width: 768px) {
  .author { 
    font-size: 2.3vw;
  }
}

Answer 3

将它贴在底部只需使用

position: fixed;
bottom: 0;

并删除两种情况下的最高值

Answer 4

不知道你的布局有多复杂，但是你只会定位到绝对的问题。尝试使用 flex 。

HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

在https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

了解详情

响应div在页面底部

4 个答案: