Question

我正在为项目构建自己的网站。我有一个活动页面，其中显示所有即将发生的事件。每次添加事件时，页面都会变大。在ATM上，页脚位于页面中间，因为没有足够的事件。

问题是，除非页面大于屏幕，否则我希望页脚位于屏幕底部。如果页面大于屏幕，则页脚应位于页面底部。

我尝试使用height: 100%或height: 100vh，但是它们将高度设置为“适合屏幕”，因此，例如，如果有20个事件（大于屏幕），则页脚将被卡住在屏幕底部，事件将通过页脚。

页面现在看起来像这样：

表将像这样建立：

<table class="events-table" >
    <thead>
        <tr>
      <th class="event-time" scope="col">Date/Time</th>
      <th class="event-description" scope="col">Event</th>
    </tr>
   </thead>
    <tbody>
      <tr>
        <td>
            #_EVENTDATES    
            #_EVENTTIMES
        </td>
        <td>
            #_EVENTLINK
            {has_location}<br/><i>#_LOCATIONNAME, #_LOCATIONTOWN #_LOCATIONSTATE</i>{/has_location}
        </td>
      </tr>
    </tbody>
</table>

Answer 1

看看这个：https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c

摘要：

使用页面容器围绕页面上的所有内容
- 将其最小高度设置为视口高度（vh）的100％。由于是相对的，以后可以根据其绝对位置设置其子元素。
content-wrap的底部填充为页脚的高度，以确保为页脚留有足够的空间以容纳它们都位于其中的容器。
包装div，其中将包含所有其他页面内容。
将页脚设置为绝对值，并坚持到底部：其中的页面容器的0。

HTML：

 <body> 
       <div id="page-container">   
            <div id="content-wrap">    
                  <!-- all other page content -->        
            </div>   
            <footer id="footer"></footer> 
       </div>
 </body>

CSS：

 #page-container {  position: relative;  min-height: 100vh;}

 #content-wrap {  padding-bottom: 2.5rem;    /* Footer height */}

 #footer {  position: absolute;  bottom: 0;  width: 100%;  height: 2.5rem;            /* Footer height */}

Answer 2

有几种不同的方法可以执行所需的操作，具体取决于所需的操作。有些网站希望页脚位于可见内容的底部（尽管如今较少），而其他网站（大多数）则将其植根于整个页面的底部，因此您必须滚动到该页面，同时还要确保它页面太小时，它不会位于可见窗口的中间。

您可能想要后者。

这里有不错的指南：https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

网络上还有其他几个，包括W3C的另一个：

https://www.w3schools.com/howto/howto_css_fixed_footer.asp

如果您确实想要一致性，那么也可以尝试在其中添加一些php魔术。没有什么能像一个小php一样令人印象深刻的Web开发项目了！

希望我有所帮助。

Answer 3

您可以使用PHP在任何页面上找到页脚，请看：https://www.w3schools.com/php/php_includes.asp 或者您可以使用诸如angular

这样的框架

有没有办法让html页脚出现在任何页面的底部？

3 个答案: