圖像高度設置爲100％時出現滾動條/溢出問題

Question

我試圖讓圖像成爲瀏覽器窗口高度的100％。我成功地使用了下面的代碼;但是，滾動條讓頁面在圖像下方向下滾動約2px。這是保證金問題嗎？我不希望滾動條出現，但我也希望圖像觸及頁面的底部。

HTML：

<div class="container"> 
    <div class="artwork"> 
     <img src="images/picture1.jpg"> 
    </div> 
</div> 

CSS：

* { margin: 0; } 

body, html, .container { 
    height: 100%; 
} 

.artwork img { 
    height: 100%; 
} 

Answer 1

的問題是一個事實，即在默認情況下的圖像垂直基線對齊。如果您在某些文字旁邊放置圖像，您可以看到此內容。圖像與文本的基線對齊，而像g和y這樣的字母則位於基線之下。你得到的空間是基線下的空間，這是字母下面的空間。如果將vertical-align更改爲top，則該空間將消失。 block`到`.artwork img`：

http://jsfiddle.net/YJZRE/

.artwork img { 
    height: 100%; 
    vertical-align: top; 
}