Проблема с полосой прокрутки / переполнением, когда высота изображения установлена ​​на 100%

Question

Я пытаюсь получить изображение на 100% высоты окна браузера. Мне удалось использовать код ниже; однако полоса прокрутки позволяет прокрутить страницу примерно на 2 пикселя вниз под изображением. Это проблема маржи? Я не хочу, чтобы полоса прокрутки появлялась вообще, но я также хочу, чтобы изображение касалось нижней части страницы.

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, пробел исчезнет.

http://jsfiddle.net/YJZRE/

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