有没有办法在任何页面的底部获得 html 页脚？

Question

我正在为一个项目建立自己的网站。我有一个活动页面，其中显示所有即将举行的活动。每添加一个事件，页面就会变大。 ATM，页脚在页面中间，因为没有足够的事件。

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

我尝试使用 height: 100% 或 height: 100vh 但他们将高度设置为 "fit to screen"，因此如果有例如 20 个事件（比屏幕大），页脚将卡在屏幕底部，事件将通过页脚。

页面现在看起来像这样：

并且 table 是这样构建的：

<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

总结：

在页面上的所有内容周围使用 page-container
- 将其最小高度设置为视口高度 (vh) 的 100%。由于是相对的，以后可以根据它设置其子元素的绝对位置。
content-wrap 有一个底部填充，即页脚的高度，确保为它们所在的容器内的页脚留出足够的 space。
此处使用包装 div，它将包含所有其他页面内容。
将页脚设置为绝对，固定在底部：page-container 中的 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

有几种不同的方法可以做你想做的事，具体取决于你想要什么。有些网站喜欢将页脚放在可见内容的底部（尽管现在很少这样做），而其他（大多数）网站则将其固定在整个页面的底部，因此您必须滚动到它，同时还要确保它当页面太小时，不会位于可见 window 的中间位置。

你可能想要后者。

这里有一个不错的指南：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 魔法。 web-dev 项目中没有什么比 php!

更令人印象深刻的了

希望我帮到了你。

Answer 3

您可以使用 PHP 在任何页面上添加页脚，看看这个：https://www.w3schools.com/php/php_includes.asp 或者你可以使用像 angular

这样的框架

有没有办法在任何页面的底部获得 html 页脚？

Is there a way to get html footer on bottom of any page?

html

css

height