簡體   English   中英

如何使用 JavaScript 在頁面底部添加空白?

[英]How can I add white space to the bottom of a page with JavaScript?

我知道這是一個非常具體的問題,但我需要使用 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”的底部被切斷: 在此處輸入圖片說明

我還希望滾動內容停在空白區域的頂部而不是頁面的底部。 這可能嗎?

如果您想在頁面底部添加空格,我認為以下方法可行:

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

body{
    margin-bottom : 56px;
}

我在w3schools tryit上試了一下,結果如下

前 :

之前[1]

后 :

][1]

使用 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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM