使用服务器端包含将页脚保留在页面底部答案

【问题标题】：Keep Footer at Bottom of Page using Server Side Includes使用服务器端包含将页脚保留在页面底部
【发布时间】：2017-10-03 05:41:50
【问题描述】：

我正在尝试创建一个包含多个页面的网站。我正在使用服务器端包含在每个页面的标题和站点内容栏中转储，因此我不必在每个页面中都包含 HTML。

我到了想要包含页脚的地步，并且正在努力解决如何将页脚强制到页面底部，并尝试了很多在 Stack Overflow 上找到的建议，或者我遗漏了一些东西或者需要尝试不同的东西。

似乎没有考虑帮助内容的高度（使用 JQuery 手风琴）...？...或者我没有正确的格式来将页脚推到页面底部屏幕。

也许有更好的方法来完成我想要完成的工作（无需复制 HTML 即可为每个页面添加页眉和页脚），或者我缺少 HTML 和/或 CSS 中的某些内容。

可以在here 找到包含页脚栏的示例页面。

上述页面的 HTML 示例如下...

<body>

<div class="page-content">

<!--#include file="../../../_includes/header.shtml"-->

<div class="container">
    <h2 class="container-header">About Widget</h2>
    <div>
        <p class="container-text">The About widget is located in the upper right-hand corner of the application, within the header, as shown below.</p>
    </div>
    <div class="widget-header-figure-container">
        <figure>
            <img class="widget-header-figure-image" src="images/about.jpg" alt="AboutWidget">
            <figcaption class="figure-caption">About widget highlighted in red</figcaption>
        </figure>
    </div>
    <div>
        <p class="container-text">The About widget provides a synopsis of the application as well as the layers included within the map.  Additional links that may be of interest are also provided.</p>
        <p class="container-text">Contact information for the <a class="link" href="http://linncounty.org/418/GIS-Division" target="_blank">GIS Division</a> and <a class="link" href="http://linncounty.org/292/Real-Estate-Services" target="_blank">Real Estate Division</a> can be found.  The Web AppBuilder Developer Edition version and application build date can be found at the bottom.</p>
    </div>

</div>

<footer>
<!--#include file="../../../_includes/footer.shtml"-->
</footer>

</div>

</body>

示例 CSS 如下：

html {
    font-size: 62.5%;
    height: 100%; 
}

body {
    background-color: #d2d2d2;
    font-family: 'Cuprum';
    height: 100%;
}

.page-content {
    min-height: 100%;
    position: relative;
}

#footer-container {
    width: 100%;
    height: 150px;
    background-color: #797986;
    bottom: 0;
    position: absolute;
    text-align: center;
}

【问题讨论】：

标签： jquery html css footer

【解决方案1】：

我会从body 和html 中删除height，将min-height: 100vh; overflow: auto; padding-bottom: 150px; box-sizing: border-box 应用到.page-content 以赋予其高度，清除浮动导航，填充底部为页脚腾出空间，并保留该填充从将高度扩展到100vh + 150px。我还将 CSS 中的 footer 选择器更改为 footer 而不是 id，因为 id 不在您的代码中。

html {
  font-size: 62.5%;
}

body {
  background-color: #d2d2d2;
  font-family: 'Cuprum';
  margin: 0;
}

.page-content {
  min-height: 100vh;
  position: relative;
  overflow: auto;
  padding-bottom: 150px;
  box-sizing: border-box;
}

footer {
  width: 100%;
  height: 150px;
  background-color: #797986;
  bottom: 0;
  position: absolute;
  text-align: center;
}

<body>

<div class="page-content">

<!--#include file="../../../_includes/header.shtml"-->

<div class="container">
    <h2 class="container-header">About Widget</h2>
    <div>
        <p class="container-text">The About widget is located in the upper right-hand corner of the application, within the header, as shown below.</p>
    </div>
    <div class="widget-header-figure-container">
        <figure>
            <img class="widget-header-figure-image" src="images/about.jpg" alt="AboutWidget">
            <figcaption class="figure-caption">About widget highlighted in red</figcaption>
        </figure>
    </div>
    <div>
        <p class="container-text">The About widget provides a synopsis of the application as well as the layers included within the map.  Additional links that may be of interest are also provided.</p>
        <p class="container-text">Contact information for the <a class="link" href="http://linncounty.org/418/GIS-Division" target="_blank">GIS Division</a> and <a class="link" href="http://linncounty.org/292/Real-Estate-Services" target="_blank">Real Estate Division</a> can be found.  The Web AppBuilder Developer Edition version and application build date can be found at the bottom.</p>
    </div>

</div>

<footer>
  footer
</footer>

</div>

</body>

【讨论】：

非常感谢，对 CSS 的更改效果很好！我对 HTML 和 CSS 很陌生，只是好奇主要问题是什么？
将height: 100% 定义为html,body 实际上使浏览器视口的高度为100%。您通常想改用html { height: 100%; } 和body { min-height: 100% }，但我发现在内容元素上使用min-height: 100vh 效果最好。并且浮动侧边栏没有被清除，因此父级的高度不尊重侧边栏的高度。查看“css clearfix”以了解更多信息。