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