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

问题描述

在项目的某个页面中,我正在循环内向面板中动态添加面板。循环结束时,我将动态添加一个页脚,并将其放置在页面底部。使用的代码和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;

}

我在另一页中的页脚使用了完全相同的代码,不同之处在于它不是动态加载的,并且工作正常,页脚位于页面底部。通过动态添加页脚可以得到相同的结果?

解决方法

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