如何使用 JavaScript 在页面底部添加空白？

Question

我知道这是一个非常具体的问题，但我需要使用 JavaScript 在页面底部添加 56px 的空白 - 就像实际页面被压缩一样，因此使用更少的屏幕空间。 以下是一些显示我想要做的事情的图像（白色空间很难看到，因为它与背景融为一体，但您仍然可以看到实际的网站较小）：

我曾尝试使用 JavaScript 将 CSS 添加到页面 - 使用一些不同的页脚代码，但无论我做什么，要么栏覆盖页面的某些部分而不是将其余部分向上移动，要么只是停留在底部而不是而不是在用户滚动时粘住。 例如这段代码：

 .footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: white; text-align: center; }

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui </p> <div class="footer"> . </div>

粗略地了解了我想要什么，但不幸的是网站内容落后于它 - 例如，当滚动文本时，它落后于它。 这取决于屏幕上页面的大小，但是在我的显示器上，当我将示例文本停在“qui”（就像我在示例中所做的那样）时，“q”的底部被切断：

我还希望滚动内容停在空白区域的顶部而不是页面的底部。 这可能吗？

Answer 1

如果您想在页面底部添加空格，我认为以下方法可行：

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: white;
   text-align: center;
    height: 56px;
}

body{
    margin-bottom : 56px;
}

我在w3schools tryit上试了一下，结果如下

前 ：

后 ：

Answer 2

使用 jquery 粘性页脚

 // Window load event used just in case window height is dependant upon images $(window).bind("load", function() { var footerHeight = 0, footerTop = 0, $footer = $("#footer"); positionFooter(); function positionFooter() { footerHeight = $footer.height(); footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; if ( ($(document.body).height()+footerHeight) < $(window).height()) { $footer.css({ position: "absolute" }).animate({ top: footerTop }) } else { $footer.css({ position: "static" }) } } $(window) .scroll(positionFooter) .resize(positionFooter) });

 #footer { background-color:#cccc;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat, risus ut pretium pellentesque, quam neque finibus sapien, ac placerat ligula nibh et elit. Nunc malesuada dictum nunc. Nam fringilla, est eget sodales semper, nisi nibh aliquet sapien, vel viverra ex augue nec nulla. Sed et neque at ante aliquet ornare. Donec faucibus lorem nisl, non pellentesque leo vestibulum ac. Vestibulum et dapibus lorem. Proin tristique orci vel purus placerat, vitae porta dolor accumsan. Praesent ornare porta dolor id aliquet. Vivamus id rhoncus diam. Nulla a erat in nisl ullamcorper faucibus. Maecenas aliquam nulla quis arcu fringilla, sed convallis risus fermentum. Mauris a ex varius nulla porta euismod id at nisi. Etiam non dolor ac lacus luctus imperdiet. Nunc facilisis urna elit, ut dictum dolor condimentum in.</div> <div id="footer"> Footer </div>