Question

我有一个网站，我试图创建包含多个页面的网站。我使用服务器端包含转储每页的标题和网站内容栏，所以我不必在每个页面中包含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;
}

Answer 1

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: