Как сделать начальную страницу на весь экран?

Question

[Sayyflyy]

Сайт резиновый и не понятно как сделать так чтоб начальная страница была на полный экран так, как не известно конечное разрешение.

Answer 1

[ummahusla]

.class-wrap {
    min-height: 100vh;
    min-width: 100vw;
}

Comments

[3luyka]

Не самое лучшее решение.

[Дмитрий Королёв]

3luyka: чой-то? Единственное, я бы min-height и min-width поставил, чтобы на небольших экранах блок имел возможность растягиваться, но использование относительных единиц в данном случае - вполне оправдано.

[ummahusla]

Дмитрий Королёв: Спасибо, на быструю руку писал писал ответ просто, забыл про это.

Answer 2

[Ivanq]

Уберите из img и поставьте в background-image css

.class-wrap {
    background-image: src(myimage.png);
    background-size: cover;
    width: 100%;
    height: 100%;
    display: inline-block;
}

Что непонятно, спрашивайте

Answer 3

[Дмитрий Новиков]

почему же неизвестно?
возьмите на jQuery $(window).width() и $(window).height() - и будет вам конечное разрешение.

Comments

[Ivanq]

Посмотрите jQuery, используйте jQuery, только jQuery... Как все это надоело! Все с jQuery просто забыли про нормальный js и css

[Дмитрий Новиков]

Тогда напишите, как на нативном js получить размеры окна браузера:) может быть, ваш вариант будет лучше?

Answer 4

[3luyka]

С помощью jQuery:

function fullScreenEl ()
{
       var windowHeight = $(window).height(); // получаем высоту окна.
       $('your_selector').css('height', windowHeight + 'px'); // устанавливаем высоту окна для определенного элемента. 
}

$(document).ready(fullScreenEl);
$(window).resize(fullScreenEl);

Comments

[Ivanq]

C jQuery все забыли про CSS!

Answer 5

[Дмитрий Пыркин]

height:100vh

Comments

[Mr Crabbz]

Не забудьте только фоллбек написать в случае неподдерживаемого vh vw и тд. Проверять можно через modernizr. Потмоу что, судя по caniuse, Opera Mini не поддерживает это дело + некоторые из андроид-браузеров.

Answer 6

[Артем Матвеев]

Оберните контент, отображаемый во весь экран:

<div class="full-screen">
</div>

Тогда:

function alturaMaxima() {
    var altura = $(window).height();
    $(".full-screen").css('min-height', altura);
}

$(document).ready(function () {
    alturaMaxima();
    $(window).bind('resize', alturaMaxima);
});