我想将页脚固定在底部空白处。如果内容较少，页脚出现并且内容已满，问题已解决，页脚应固定在底部，而我将放大或缩小。但是当我缩放时，页脚将转到内容部分
<head runat="server">
<asp:contentplaceholder id="HeaderContent" runat="server"></asp:contentplaceholder>
</head>
<body class="hidden-sn white-skin backcolor">
<form id="form1" runat="server">
<main>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server"></asp:contentplaceholder>
</main>
<!--main layout-->
<!--footer-->
<footer id="footer" style="position:relative;bottom: 0;left: 0;width: 100%; height: 50px;text-align: center; color: rgba(255, 255, 255, 0.6); line-height: 50px; overflow: hidden; font-size: 0.9rem; background-color: rgba(62, 69, 81, 0.3)">
<div class="footer-copyright">
<div class="container-fluid">
© copyright 2016 transgraph consulting pvt.ltd, all rights reserved.
</div>
</div>
</footer>
</body>
</html>
这是我的母版页。
position: relative ---> if content is less coming up.
position: absolute and fixed ----> if content is more getting on content.
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', 0 + (docHeight - footerTop) + 'px');
}
我使用 jQuery 来修复它。将我的页脚固定在底部。建议我使用 CSS 或 jQuery 解决这个问题。我想修复底部空白处的页脚。如果内容较少，页脚出现并且内容已满，问题已解决，页脚应固定在底部，而我将放大或缩小。但是当我缩放时，页脚将转到内容部分
最佳答案
没有 Jquery 的 CSS 粘性页脚
CSS:
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
HTML:
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>Text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
关于jquery - 使用 jQuery 修复底部的页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49645004/