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

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

html css

有没有办法在任何页面的底部获得html页脚？,html,css,height,Html,Css,Height,我正在为一个项目建立自己的网站。我有一个活动页面，显示所有即将到来的活动。每次添加事件时，页面都会变大。ATM，页脚在页面的中间，因为没有足够的事件。问题是，我希望页脚位于屏幕底部，除非页面比屏幕大。如果页面大于屏幕，则页脚应位于页面底部我尝试使用height:100%或height:100vh但他们将高度设置为“适合屏幕”，因此，如果有20个事件（比屏幕大），页脚将粘在屏幕底部，事件将通过页脚该页面现在如下所示：表的结构如下所示：日期/时间事件 #_事件日期 #_事件时间 #_

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

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

我尝试使用

height:100%

或

height:100vh

但他们将高度设置为“适合屏幕”，因此，如果有20个事件（比屏幕大），页脚将粘在屏幕底部，事件将通过页脚

该页面现在如下所示：

表的结构如下所示：


日期/时间
事件
#_事件日期
#_事件时间
#_事件链接
{has_location}
#u LOCATIONNAME、#u LOCATIONTOWN、#u LOCATIONSTATE{/has_location}

看看这个：

总结：

在页面上的所有内容周围使用页面容器
- 将其最小高度设置为视口高度（vh）的100%。由于它是相对的，以后可以基于它设置其子元素的绝对位置
内容包装有一个底部填充，即页脚的高度，确保在它们都所在的容器中为页脚留出足够的空间
这里使用的包装div将包含所有其他页面内容
将页脚设置为绝对，粘贴到其所在页面容器的底部：0

HTML:

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

有几种不同的方法来做你想做的事情，具体取决于你想要什么。一些网站喜欢在可见页面的底部有一个页脚（尽管现在很少这样做），而另一些网站（大多数网站）则将页脚扎根到整个页面的底部，因此你必须滚动到它，同时确保当页面太小时，页脚不会位于可见窗口的一半

你可能想要后者

这里有一个不错的指南：

网络上还有其他几种，包括W3C的：

如果您真的想要一致性，您也可以尝试在其中加入一些php魔术。在web开发项目中，没有什么比php更能打动人了

希望我有所帮助。

您可以使用PHP在任何页面上获取页脚，请看以下内容：

或者您可以使用类似angular的框架

添加到CSS的：

主体{minheight:100%；}

 #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 */}