Что делать, если div не заполняет всю высоту окна?

Question

[Ensiouel]

При уменьшении высоты браузера можно заметить, что div не заполняет всю высоту окна, как это исправить?


CSS код левого div'а

.content-left {
    height: 100%;
    width: 50%;
    position: absolute;
    background: url(../images/background.jpg);
    background-size: cover;
}

Comments

[eldar_web]

Весдь код не видим, поэтому лучше здесь написать https://jsfiddle.net/ и показать ссылку!

Answer 1

[Zombie42679]

Сам div больше картинки ? Если да, то добавить для img - display: block

Comments

[Ensiouel]

[eldar_web]

Там напрямую к диву вставляется картинка.

[Zombie42679]

eldar_web, ну как вариант дать больше ширины для div, насколько я понимаю она пропорционально сжимается.

[Ensiouel]

Zombie42679, Не сработало

[Zombie42679]

Ensiouel, у вас на img стоит max-width: 100% верно ? С уменьшением ширины экрана - уменьшается картинка пропорционально ?

И что вы конкретно хотите видеть. если просто нужно вытянуть картинку, то можете высоту напрямую задать нужную, но картинка будет ужасно выглядеть.

Answer 2

[Максим]

блоку дать height: 100vh
картинке дать height: 100%. Опять же, если в картинке дело.

Comments

[Ensiouel]

height: 100vh не работает, тут дело не в картинке, а в самом блоке, картинка на 100% заполняет блок, а пот сам блок не заполняет всю высоту экрана

[Максим]

Ensiouel, А можешь на хостинг залить и скинуть?

[Zombie42679]

Ensiouel, Логично, что блок не заполняет высоту, ведь высота блока зависит от контента - картинки, а она в свою очередь сжалась из-за ширины...

Answer 3

[Александр]

Задайте просто блоку с картинкой position: fixed
для вашей задачи наверное сойдет, а вообще не работает потому что контент правого столбца больше 100% окна браузера, если надо больше читайте про "колонки одинаковой высоты".

Answer 4

[Егор Живагин]

background-size: contain; // поиграй с этим, попробуй contain , 100% , ...

А ещё лучше код выложить в песочницу