調整後100％高度div滾動

我有一個由三個部分組成的單頁網站。他們每個人都有100％的寬度和高度。當我調整窗口的位置時，第一部分或最後一部分的窗口大小都調整得很好，但是當我在第二部分時，它會變得瘋狂（不是真的很瘋狂......在調整窗口大小之後，第一部分也縮短了，所以第二部分正在被拖拽，露出第三部分的一部分）。當我位於第二部分並調整窗口大小時，我希望整個部分在窗口內'固定'，所以我不會看到第一部分和第三部分的碎片。當我嘗試描述它時，這變得更加複雜，所以這裏是簡單的小提琴：http://jsfiddle.net/4tVMk/。我在談論B節（div＃two）的行爲。爲了證明它有任何意義，我只能補充說，在網站上滾動關閉，我只是想它看起來有點像...幻燈片？所以每一個調整大小隻是視覺上把一切都毀了。調整後100％高度div滾動

HTML：

<div id="one"><a href="#two">A</a></div> 
<div id="two"><a href="#three">B</a></div> 
<div id="three"><a href="#one">C</a></div>

CSS：

#one { 
    width:100%; 
    height:100%; 
    background-color:red; 
} 
#two { 
    width:100%; 
    height:100%; 
    background-color:green; 
} 
#three { 
    width:100%; 
    height:100%; 
    background-color:blue; 
    font-weight:800; 
} 
a { 
    color:white; 
}

我已經嘗試過不斷變化的最後一個div尺寸的HAX，但我看不到第三格在所有。在放棄這個想法之後，我也試着簡單地重新加載每個改變高度的resize的整個頁面，但是它不能很好地工作，因爲我不能在不使用當前位置的情況下實現整個頁面的重新加載。

感謝您的任何幫助。

E：事實上，我從字面上理解了'固定'的東西，並且使用jQuery來防止區域在某些條件下上升或下降。它現在會做，但如果任何人至少有任何想法，我可能會尋求一些提示，使其更自動化，我會非常感激。

來源

2014-01-19 Entalpia

看看這個[小提琴]（http://jsfiddle.net/jEqZ2/） – Olumide

我想在最近參與的一個項目中完成類似的事情。在該項目的情況下，我們希望屏幕頂部有一些標籤按鈕，當點擊時會切換當前頁面主體。

你的情況似乎有些不同，但鑑於你正在禁用滾動，並希望當前的div佔據屏幕高度的100％寬度，這聽起來像你只需要一次顯示1個div，所以代碼我用它應該爲你工作。我修改您的代碼以顯示此：

HTML：

<div class="fill-screen" id="one"><a href="#two">A</a></div> 
<div class="fill-screen" id="two"><a href="#three">B</a></div> 
<div class="fill-screen" id="three"><a href="#one">C</a></div>

CSS：

div.fill-screen { 
    width: 100%; 
    height: 100%; 
    display: none; 
} 

div.fill-screen:target { 
    display: block !important; 
} 

#one { 
    background-color: red; 
} 

#two { 
    background-color: green; 
} 

#three { 
    background-color: blue; 
    font-weight: 800;  
} 

a { 
    color: white; 
}

JS：

$(window).on('hashchange', function() { 
    if (document.location.hash === "" || document.location.hash === "#") { 
     document.location.hash = "#one"; 
    } 
}); 

$(window).trigger('hashchange');

不幸的是它確實需要JS，但它很輕便，而且肯定比使用jQuery來防止區域上升或下降更好。上面的例子使用了jQuery，但在純JS中完成將會很簡單 - 我恰好在項目中使用jQuery。

所以要完全解釋，這個解決方案在三個div上使用CSS：target選擇器。基本上這意味着當div是'targetted'時，即URL中的當前散列引用其id，給定的CSS將被添加到該特定div。默認情況下，您的三個div設置爲display: none;，因此它們是不可見的，但是如果它們中的任何一個針對URL哈希，則會覆蓋display屬性，即display: block !important;。這會導致目標div顯示並填充頁面，但其他兩個仍然隱藏，因爲它們的CSS不受影響。

在沒有提供任何內容的情況下，JS需要設置URL散列，例如，當你的用戶第一次瀏覽你的頁面時，三個div都不會被定位。它綁定到hashchange事件，然後在頁面加載時強制觸發該事件。這意味着，無論用戶在沒有散列的情況下導航到頁面，或者在頁面加載後嘗試刪除散列，它們都將被引導回默認散列 - 在本例中爲「#one」。因此，導航到「/page.html」或「/page.html#」會立即將網址更改爲「/page.html#one」，並在id爲「one」的div上觸發display: block !important;規則。

如果您不希望在頁面加載時使用任何div，或者相反您可以更改if條件以強制散列爲「#one」「，」#two「或」#three「進行陣列成員資格測試。我會把它留給你。

如果以上還不是完全清楚，這裏有一個的jsfiddle：http://jsfiddle.net/Tedworthy/M33Ct/

來源

2014-01-19 23:15:55

調整後100％高度div滾動

回答

相關問題