高度響應水平圖片庫，固定頁眉和頁腳

Question

我想在我的網站上爲攝影作品組合製作水平滾動圖庫，但我希望圖片能夠響應高度（以適應不同的屏幕尺寸）。爲了嘗試這樣做，我使用了這個單元：vh，這導致了我的問題。
我有一個position:fixed頁眉和頁腳，所以他們總是留在屏幕上，而你滾動畫廊。隨着CCS的使用，這意味着屏幕越來越小，這些圖像就在頁眉下面，而不是經常停留在它們之間。

我看過一個網站，其理想的水平畫廊非常類似於我想實現的目標。您可以查看網站here。在鏈接的網站上，圖片始終與頁眉和頁腳保持等距。
當檢查元素時，它看起來像是在使用表格，我認爲這是一個很大的不，不。這是他們如何在畫廊上實現這種效果？

我已經將JS小提琴鏈接到了我的設計的一個非常基本的版本，所以您可以看到我迄今爲止所做的工作。

JS小提琴：https://jsfiddle.net/pmh9zvta/1/

基本上，在一個句子我問我如何能實現爲鏈接的例子網站相同的效果。

Answer 1

羅賓，

嗯...所以VH能真正實現一個非常類似的效果。雖然（1500x100），您的示例圖像是相當極端的。

看看這個小提琴我做了（使用你的代碼爲基礎）： https://jsfiddle.net/Benihana77/5xw21tvc/

*, 
*:before, 
*:after { 
    box-sizing: inherit; 
} 

html { 
    height: 100%; 
    box-sizing: border-box; 
    position: relative; 
} 

body { 
    position: relative; 
    margin: 0; 
    padding-bottom: 100px; 
    min-height: 100%; 
} 

#header { 
    width: 100%; 
    padding: 10px; 
    margin-right: auto; 
    margin-left: auto; 
    position: fixed; 
    background-color: #fff; 
    background: rgb(255, 255, 255); 
    /* Fall-back for browsers that don't support rgba */ 
    background: rgba(255, 255, 255, 0.92); 
    text-align: center; 
    z-index: 1; 
} 

#gallery-wrapper { 
    position: relative; 
    padding-top: 60px; 
    overflow-x: scroll; 
} 

#gallery-wrapper img { 
    height: 70vh; 
    width: auto; 
} 

#footer { 
    font-family: Corda-Light; 
    font-size: 14px; 
    color: #333; 
    width: 100%; 
    padding: 5px; 
    padding-top: 13px; 
    padding-bottom: 8px; 
    padding-left: auto; 
    padding-right: auto; 
    position: absolute; 
    bottom: 0; 
    background-color: #efefef; 
    text-align: center; 
    background-color: #fff; 
    background: rgb(255, 255, 255); 
    /* Fall-back for browsers that don't support rgba */ 
    background: rgba(255, 255, 255, 0.9); 
    z-index: 1; 
} 


/* Navigation Bar Styling */ 

.nav { 
    border-bottom: 1px solid #ccc; 
    border-width: 1px 0; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    text-align: center; 
} 

.nav li { 
    display: inline; 
} 

.nav a { 
    display: inline-block; 
    padding: 10px; 
} 


/* Horizontal Gallery Styling */ 

ul.gallery-row { 
    white-space: nowrap; 
} 

ul.gallery-row li { 
    list-style: none; 
    display: inline; 
} 


/* Footer Styling */ 

.footer { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

.footer img:hover { 
    opacity: 0.6; 
    filter: alpha(opacity=60); 
} 

主業變更

• 加在你的內容的包裝更好的管理（內的jsfiddle和出）。

• 將您的頁腳更改爲絕對定位，以及一系列其他更改，這些更改允許它堅持到底部，直到視口太短。然後它像普通頁腳一樣被推下去。這使您的內容不會落在頁腳後面。

• 用「overflow-x：scroll」製作了「gallery-wrapper」。我個人不喜歡橫向滾動的畫廊，但如果你的心已經放在它上面，這將保持包含在這個塊中的橫向滾動，並且不會讓你的整個網站（反過來不需要「固定」頁腳）。

• 選擇一些更逼真的圖像尺寸來處理，並縮短vh（70）。

關於您的示例，盡我所知，他們使用JavaScript來重寫「scrollHolder」容器DIV的高度。所以他們的解決方案不僅僅是CSS，而是使用JS來讀取瀏覽器的高度並相應地調整高度。

我也會說他們的方法有缺陷，因爲它不能正確縮放到瀏覽器寬度。在較薄的屏幕上，您只能看到每個圖像的放大部分。

因此，除了上述變化，我建議：

• 在適當的瀏覽器的寬度設置媒體查詢（比如760）讓您的圖像成爲瀏覽器的寬度，沒有高度成比例（所以vw，而不是vh）。

• 這可能需要一些特殊的「最小高度」設置，以防止高高的圖像變得過於高大，並使短小的圖像變成小小的munchkins。