CSS JQuery Div相對於窗口大小的起始位置

我有一個很長的單頁面佈局。包含所有內容的主容器div設計爲接近頁面底部（白色方塊，從底部窺視到足以看到徽標，在用戶不得不滾動以查看更多內容之前）。CSS JQuery Div相對於窗口大小的起始位置

問題是不同的屏幕尺寸和不同的尺寸的瀏覽器，所述主容器的div在不同的高度從頂部開始，示出更多或更少的當用戶第一次到達比預期。

我的想法是，我將需要使用js來計算window.height，減去我想最初顯示的容器數量的高度，然後將所有這些都包含在事件處理程序中，以跟蹤瀏覽器大小。

我用jQuery一個小白然而，並不能弄明白。任何可用的示例或教程都將引領這一趨勢？

來源

2013-04-07 obmon

你應該可以用CSS和百分比值做到這一點。你到目前爲止嘗試過什麼，或者你的代碼是什麼樣的？ – dsundy 2013-04-07 01:26:51

#dsundy我嘗試了百分比值..與利潤率，不同的位置..等他們不工作時調整瀏覽器窗口的大小。 – obmon 2013-04-07 02:05:27

如果我理解正確，則不需要JavaScript。將div從頂部絕對100％放置，然後將margin-top設置爲負值。

CSS：

body, html {height: 100%;} 

.section-1 { 
    margin-top: -60px; /* Whatever value you want peeking out */ 
    position: absolute; 
    top: 100%; 
}

看到一個工作的jsfiddle這裏：http://jsfiddle.net/dsundy/5kt8P/1。

來源

2013-04-07 02:32:04 dsundy

呃..哇..我很驚訝它可以很容易地在CSS中完成..謝謝！ – obmon 2013-04-07 02:49:00

做了一個搗鼓這個：http://jsfiddle.net/QQaZp/1/

基本上，任何你想要的位置（我只是用DIV，但你應該使用#whateverID）在你的CSS定位絕對設置。在加載和在javascript中調整大小時，只需將頂部屬性設置爲任何$(window).height()（我從此減去50像素，因此它被偷看了一下）

來源

2013-04-07 01:30:51

這是完美的謝謝你。我沒有想到使用window.ready，並且我不知道jquery中有一個.resize函數。一次學習一步。再次感謝。 – obmon 2013-04-07 02:06:28

CSS JQuery Div相對於窗口大小的起始位置

回答

相關問題