使用服务器端包含页面底部的页脚

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

来源

2017-05-04 boyle.matt

我就从body和html删除height，适用于min-height: 100vh; overflow: auto; padding-bottom: 150px; box-sizing: border-box到.page-content给它的高度，而不是清除浮动导航，垫底部为脚注留出空间，并保持填充从高度延伸到100vh + 150px。我还将您的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>

来源

2017-05-04 21:40:07

太感谢你了，更改到CSS工作太棒了！我对HTML和CSS相当陌生，只是好奇主要问题是什么？ –

将'height：100％'定义为'html，body'实际上使浏览器视口的高度为100％。你通常要使用'html {height：100％; }'和'body {min-height：100％}'，而我发现在内容元素上使用'min-height：100vh'效果最好。而浮动的边栏没有清除，所以父母的高度不尊重边栏的高度。查看“css clearfix”以了解更多信息。 –

使用服务器端包含页面底部的页脚

回答

相关问题