动态添加的页脚不会停留在 ASP.NET 页面的底部

Posted

技术标签:

【中文标题】动态添加的页脚不会停留在 ASP.NET 页面的底部【英文标题】:Dynamically added footer doesn't stay at the bottom of page ASP.NET 【发布时间】:2020-12-12 04:44:13 【问题描述】:

在项目的某个页面中,我在循环内动态地将面板添加到表单中。当循环结束时,我正在动态添加一个页脚,我想将它放在页面底部。使用的代码和 CSS 类如下:

Form.Controls.Add(new LiteralControl("<div class='form'></ div >" +
                                             "<div class='footer'>  +
                                                    "<p>Copyright © 2019-2020 SiteName.com™. All rights reserved.</p>" +
                                             "</div>"));

   .form 
padding-top: 50px;
position: relative;
z-index: 1;
text-align: center;
min-height: 84vh;

 .footer 
font-family: "Roboto", sans-serif;
border: 1px dotted black;
padding: 10px;
bottom: 0;
position: relative;
z-index: 1;
bottom: 0px;

我在另一个页面中为页脚使用了完全相同的代码,除了它不是动态加载的,而且它工作正常,页脚被放置在页面底部。如何通过动态添加页脚获得相同的结果?

【问题讨论】:

此页面的内容是否较小....因此页脚拉起?截图会很有帮助 尝试位置:固定; 不,在我看到差异的页面中创建的动态内容与其他页面的固定内容几乎相同 【参考方案1】:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer 
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;

</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html> 

【讨论】:

以上是关于动态添加的页脚不会停留在 ASP.NET 页面的底部的主要内容,如果未能解决你的问题,请参考以下文章

在 asp.net 母版页中更改页脚颜色

在 Gridview 的页脚中访问链接按钮单击事件

为啥我的页脚不会移动到页面底部?

页脚与页面内容不断重叠

如何使用展开和折叠数据行的选项将页脚模板添加到 gridview?C#/ASP.NET

Bootstrap 响应式粘页脚