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

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

jquery html css

Jquery 使用服务器端包含将页脚保持在页面底部,jquery,html,css,footer,Jquery,Html,Css,Footer,我有一个网站，我正试图创建，其中包括多个页面。我使用服务器端包含在每个页面的标题和站点内容栏中转储，因此我不必在每个页面中都包含HTML 我已经到了一个地步，我想包括一个页脚，并且正在努力解决如何将页脚强制放在页面底部的问题，并且尝试了很多关于堆栈溢出的建议，要么我缺少了一些东西，要么需要尝试一些不同的东西似乎没有考虑帮助内容的高度（使用JQuery accordion）…？…或者我没有正确的格式将页脚推到页面底部而不是屏幕也许有更好的方法来完成我想要完成的任务（在不复制HTML的情况下为每

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

我已经到了一个地步，我想包括一个页脚，并且正在努力解决如何将页脚强制放在页面底部的问题，并且尝试了很多关于堆栈溢出的建议，要么我缺少了一些东西，要么需要尝试一些不同的东西

似乎没有考虑帮助内容的高度（使用JQuery accordion）…？…或者我没有正确的格式将页脚推到页面底部而不是屏幕

也许有更好的方法来完成我想要完成的任务（在不复制HTML的情况下为每个页面引入页眉和页脚），或者我在HTML和/或CSS中遗漏了一些东西

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

上面页面的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>

我会从

body

和

html

中删除

height

，应用

minheight:100vh；溢出：自动；填充底部：150px；框大小：边框框

至

。页面内容

若要为其指定高度，请清除浮动的导航，在底部垫上垫板，为页脚留出空间，并防止垫板将高度延伸至

100vh+150px

。我还将CSS中的

footer

选择器更改为

footer

，而不是

id

，因为

id

不在代码中

html{
字体大小：62.5%；
}
身体{
背景色：#d2d2d2；
字体系列：“Cuprum”；
保证金：0；
}
.网页内容{
最小高度：100vh；
位置：相对位置；
溢出：自动；
填充底部：150px；
框大小：边框框；
}
页脚{
宽度：100%；
高度：150像素；
背景色：#797986；
底部：0；
位置：绝对位置；
文本对齐：居中；
}


关于小部件
About小部件位于应用程序的右上角，在标题中，如下所示
关于以红色突出显示的小部件
About小部件提供应用程序的概要以及地图中包含的图层。还提供了可能感兴趣的其他链接
可以找到和的联系信息。可以在底部找到Web AppBuilder开发者版版本和应用程序构建日期
页脚

非常感谢您，CSS的更改非常有效！我对HTML和CSS非常陌生，只是好奇主要问题是什么？将

高度：100%

定义为

HTML，body

实际上使浏览器视口的高度达到100%。您通常希望使用

html{height:100%；}

和

body{minheight:100%}

来代替，但我发现在内容元素上使用

minheight:100vh

效果最好。浮动侧边栏没有被清除，因此父级的高度不考虑侧边栏的高度。查看“css clearfix”以了解更多信息。

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