【问题标题】：Place Wordpress Footer At End Of Page将 Wordpress 页脚放在页面末尾
【发布时间】：2016-07-18 09:10:20
【问题描述】：

我有一个两难境地，我很欣赏并尝试提出的任何建议。我有一个使用主题 The Fox 运行 wordpress 的本地主机。除了页脚之外，我的所有内容都运行良好。

我有一些页面的内容不扩展页面，而其他页面扩展超过一个页面，我遇到的问题是页脚正好从文本结束的地方开始，我不想因为视口而添加空白不同之处。正如您在下面看到的，我有一个包含少量内容的示例页面的屏幕截图。

我希望您注意到页脚之后的额外空白，这也是屏幕上将页脚带到页面中心的地方。

无论内容的长度或屏幕的大小，我都希望页脚延伸到页面的末尾。

在 CSS 内部，有一个页脚部分，它在 Pastebin 上，但我认为最重要的部分如下；

页脚

{
bottom:0px;
right:0;
left:0;
overflow:auto;
padding:0px;
min-height:70px!important;
height:auto;
position: relative;
z-index: 9000;}

在页脚中，我只使用了一个列，我认为这段代码可以处理...也在 pastebin 中。

 .footer_1_col .widget_wrap 
   {
width:100%!important;
float:none!important;
margin-left:auto!important;
margin-right:auto!important;
padding-right:10px!important;
}

而在页脚类型上，我使用的是type 8，它使用了代码；

/**************************************************

   Footer Type 8

**************************************************/
   .footer_type_8 .widget_wrap {
    margin: 10px 0px 0px 0;
    }
    .footer_type_8 .widget {
    margin:0px 0px 0px 0;


}
.footer_type_8 .widget h2 {
font-size:10px;
text-transform:uppercase;
font-weight:900;
letter-spacing:normal;
line-height:14px;
margin-bottom:0px;
padding-left:0px;
position: fixed;
}
.footer_type_8 .widget_line {
display:none;
}

请问我做错了什么，我需要在哪里进行更改？如果您需要查看其他代码，请告诉我，我会在 pastebin 上发布。

谢谢。

【问题讨论】：

我会尝试将min-height: 95vh 放在围绕内容的容器上，在页脚上方。
@firasd 我这样做了，但在每一页上都留出了额外的空白。
即使页面有足够的内容可以将页脚向下推？
我明白了。内容 div 上的 min-height 正是您所需要的。在没有看到 HTML 的情况下，我无法告诉你究竟将这个 CSS 应用到哪个元素，但我在 Fox 主题演示中尝试过，它可以工作。
试试.section.def_section { min-height: 80vh; }

标签： css wordpress sticky-footer

【解决方案1】：

特别感谢 @Firasd 的 cmets 让这一切成为可能。

我所做的只是使用浏览器检查器查找 body 元素，然后使用已知的页眉和页脚的静态高度重新计算该元素的大小。

已添加到页面的 CSS 部分

html,body {height:100%;}#fw_c { min-height: calc(100vh - 162px);}

主题使用 Bakerly Visual Composer，我只需将上面的代码添加到我想要更改的页面。

请注意，如果您有滑块，则也需要将其放入计算中，除非您的滑块位于行元素中。

【讨论】：