滾動條即使在沒有必要時也可見 -

的代碼我用http://codepen.io/sebazelonka/pen/pDGin

即使內容的高度比容器的同一高度，滾動條是可見的。我嘗試了不同的選項，但錯誤仍然存在。

我在不同的瀏覽器中試過了，包括FF，Chrome，Safari和Opera，並且總是有相同的錯誤。

HTML

<div class="image-viewport portrait" style="width: 100%; height: 400px;"> 
     <div class="image-wrapper" style="width: 100%; height: 400px;"> 
      <img src="http://www.hdwallpapersview.com/wp-content/uploads/2013/05/landscape_7.jpg"> 
     </div> 
</div>

CSS

body { 
    background: #999; 
} 

.image-viewport { 
    overflow: auto; 
} 

.image-wrapper { 
    background: #333; 
    text-align: center; 
} 

.image-viewport.portrait img { 
    height: 100%; 
}

來源

2013-11-26 sebazelonka

這裏有2個不同的解決方案：

將vertical-align:top添加到img元素。（默認爲vertical-align:baseline）
將img更改爲block級別元素。

Updated Codepen example使用display:block

注意事項使用vertical-align:top

.image-viewport.portrait img { height: 100%; vertical-align:top; }

Updated Codepen example：對於水平居中，使用margin:0 auto，作爲text-align:center將不再工作，因爲該元素是不是inline元素了。

.image-viewport.portrait img { 
    height: 100%; 
    display:block; 
    margin:0 auto; 
}

另外，如果窗口太小，不要與滾動條相混淆。 img包裝上的滾動條已被刪除。

來源

2013-11-26 18:40:05

那麼爲什麼100％的高度需要垂直對齊呢？看起來像100％= 100％，元素應該恰好適合對方而不會溢出。 – edhedges

@hedhedges它與高度無關。這只是事實，默認對齊是基準。[看這個例子]（http://jsfiddle.net/JoshC/4W2nq/） –

這個例子只是讓我困惑。爲什麼包裝圖像高度不同的div？垂直對齊填充整個div高度，而基線不填充。我不明白爲什麼。 – edhedges

只要改變你的.image-viewport類這樣的：

.image-viewport { 
    overflow: hidden; 
}

來源

2013-11-26 17:34:33 edhedges

我需要保持它自動，因爲該圖像可以放大，我需要滾動瀏覽它。 – sebazelonka

你應該在你的問題中指定。我不確定圖像如何在不觸發滾動條的情況下填充整個元素。您正在將圖片大小調整爲400px高的圖元，圖片高度爲1200px。如果您給出99％的高度，則滾動條會消失，但底部會顯示灰色背景的小間隙。我不確定如何解決您的問題，但對如何解決問題感到好奇。 – edhedges

@edhedges'overflow：none'不是一個有效的屬性。你可能會想到'overflow：hidden'。無論如何，如果你想知道如何解決它，請查看我的答案。 –

滾動條即使在沒有必要時也可見 -

回答

相關問題