如何将文本固定在页面底部？

Question

如何将文本固定在页面底部？

htmlcss

28

- Misha Moroshko

“不按预期工作”到底是什么意思？ - RoToRa

有任何可供我们使用的代码示例吗？ - Flatlin3

你说的“页面底部”是什么意思？如果是这样，你只需要将它添加到HTML代码的底部。但是，似乎你想把它放在窗口底部而不是页面底部。（如果页面被滚动或窗口被调整大小，它应该始终粘在下边框上。（这是你想要的吗？） - chiccodoro

我觉得你在寻找这个问题的答案。无论你调整浏览器窗口大小,页脚div将始终处于其他所有div之下。 - Patrick

6个回答

28

尝试：

.bottom {
    position: fixed;
    bottom: 0;
}

- Sergey Ilinsky

21

试一试这个

 <head>
 <style type ="text/css" >
   .footer{ 
       position: fixed;     
       text-align: center;    
       bottom: 0px; 
       width: 100%;
   }  
</style>
</head>
<body>
    <div class="footer">All Rights Reserved</div>
</body>

- Thorin Oakenshield

2

我进行了编辑以使其正常工作，并保持了将其放置在中心的想法，因为我自己也需要它。希望其他人也会发现它有用。 - Vitali Pom

如果Px等于0，则不需要它，为什么要添加额外的字节呢？ :) - user10060795

9

根据我的研究和开始这篇文章，我认为这是最佳选择：

<p style=" position: absolute; bottom: 0; left: 0; width: 100%; text-align: center;">This will stick at the botton no matter what :).</p>

这个选项允许调整页面大小，即使页面是空白的，它也会保持在底部。

- Chop Labalagun

我喜欢这个解决方案！ - Farzad Amirjavid

这对我真的很有效。最简单的解决方案。 - NStavrakoudis

2

这是我做的方法。最初的回答。

#copyright {
 float: left;
 padding-bottom: 10px;
 padding-top: 10px;
 text-align: center;
 bottom: 0px;
 width: 100%;
}

  <div id="copyright">
  Copyright 2018 &copy; Steven Clough
  </div>

- Steven Clough

2

如果我点击“运行代码片段”，它会显示在页面顶部，而不是底部！ - Reversed Engineer

0

一个老的帖子，但是...Konerak的答案有效，但是为什么你要默认设置容器的大小呢？我更喜欢在任何情况下都使用代码，无论页面大小有多大。所以这是我的代码：

<style>
   #container {
    position: relative;
    height: 100%;
 }
 #footer {
    position: absolute;
    bottom: 0;
 }
</style>

</HEAD>

<BODY>

 <div id="container">

    <h1>Some heading</h1>

<p>Some text you have</p> 

<br>
<br>

<div id="footer"><p>Rights reserved</p></div>

</div>

</BODY>
</HTML>

关键在于使用<br>来换行。因此，当页面很小的时候，您会看到页脚位于页面底部，就像您想要的那样。

但是，当页面很大以至于您必须向下滚动时，您的页脚将会在整个上方内容的下面两行。如果您随后再扩大页面，您的页脚将始终向下移动。我希望有人会发现这个有用。

- LuckyLuke82

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Konerak · Accepted Answer

你可能希望将绝对定位的div放在相对定位的容器中 - 这样它仍会被包含在容器中而不是浏览器窗口中。

<div style="position: relative;background-color: blue; width: 600px; height: 800px;">    

    <div style="position: absolute; bottom: 5px; background-color: green">
    TEST (C) 2010
    </div>
</div>