如何讓頁面的一部分始終處於與屏幕相同的位置？

-2

我正在製作一個網站，我有一個導航欄和一個主要內容部分，導航欄位於屏幕的頂部，靠近屏幕底部的主要內容。但是，如果我更改屏幕高度，則主要內容部分會保留在相同位置，並且會從我的瀏覽器視口/窗口中消失，這是完全正常和預期的。但我想要的是，無論屏幕尺寸/分辨率/高度如何，主要內容部分始終位於屏幕底部的相同位置。我怎樣才能做到這一點？如何讓頁面的一部分始終處於與屏幕相同的位置？

我的網站是jeffarries.com，我說的是在我的主頁上，如果你需要一個視覺。

我已經使用了JavaScript，但我並不是很熟悉它。我沒有使用jQuery的經驗，但是我很好地實現了一個完成的jQuery腳本。

感謝您的時間和精力！

請讓我知道是否需要進一步的信息。

UPDATE：因爲這個問題似乎是不清楚，拿我的網站的訪問，你會看到，說：「在這裏你可以瞭解我和我的故事」一文，我想該文本在加載時出現在瀏覽器窗口的底部，但是，我希望它保持通常的流程，位於「最近的活動」框的頂部。基本上我希望文本頂部的邊距根據瀏覽器窗口高度進行更改，並將文本保留在瀏覽器窗口的底部。

來源

2016-03-05 Emmet Arries

'position：fixed;底部：0' – adeneo

@adeneo我希望它在頁面的底部，但滾動時仍然是液體（不是「固定」）。 –

看看這個答案：http://stackoverflow.com/a/42301/581760 – reinder

您可以在此通過使用歸檔CSS3 VH屬性[查看端口高度]。爲此，您必須製作一個容器並將其高度增加到100vh。這裏是現場演示 - https://jsfiddle.net/8dptzvye/

*{box-sizing:border-box; -webkit-box-sizing:border-box;} 
.container{height:100vh} 
.container span{position:absolute; width:100%; display:block; left:0; bottom:0; text-aling:center; padding:20px; background:black; color:#fff} 

<div class="container"> 
<div class="cover">Extra Infomation </div> 
<span>here you can learn about me and my adventures</span> 
</div>

來源

2016-03-05 08:22:54

你可能會尋找position: fixed

編輯

如果你想根據窗口大小來改變margin，你可以使用jQuery的resize

$(window).resize(function() { /* change margin of element */ });

來源

2016-03-05 05:57:21 vinit

感謝您的回答！但我希望它位於頁面的底部，但滾動時仍然是液體（不固定，可滾動）。 –

你希望它每次都保留在頁面底部或其他一些經驗？可能是從這個問題不清楚你是什麼 – vinit

請看我的更新。 –

如何讓頁面的一部分始終處於與屏幕相同的位置？

回答

相關問題