Высота видового экрана и .css()

То, что я пытаюсь достичь, - это получить высоту видового экрана браузера и добавить его в несколько классов моего css. До сих пор у меня есть это:Высота видового экрана и .css()

Get окно просмотра высота:

var width = $(window).width(); 
var height = $(window).height();

Добавить в CSS

$('divOne').css({"height": " *viewport height* "}); 
$('divTwo').css({"top": " *viewport height* "}); 
$('divThree').css({"top": " *viewport height* + 200px"}); 
$('divTwo').css({"top": " *viewport height* + 400px "});

Пример:

Sample

Было бы очень здорово, если бы кто-то мог здесь приведена часть рабочего кода. Мои навыки кодирования очень ограничены.

источник

2013-05-12 Kev89

Вы пробовали (очень близко) код, который вы опубликовали? Кроме того, что вам нужно делать математику за пределами строковых литералов, она выглядит правильно. –

Подсказка: '$ ('. DivThree'). Css ('top', height + 200);' –

Да, синтаксис. Это было из моих основных проблем :) – Kev89

Ваш код выглядит правильно, за исключением того, что вы должны выполнять математику за пределами строковых литералов, а поскольку вы используете классы, вам нужен селектор классов (например, ".divOne", а не «divOne»), например :

var width = $(window).width(); 
var height = $(window).height(); 
$('.divOne').css({"height": height + "px"}); 
$('.divTwo').css({"top": height + "px"}); 
$('.divThree').css({"top": (height + 200) + "px"}); 
$('.divTwo').css({"top": (height + 400) + "px"});

Возможно, вы также захотите дать divs с двух до четырех высоты, потому что в противном случае они будут только высотой, чем их содержание. И вам нужно быть уверенным, что скрипт, работающий на divs, равен после divs в разметке, чтобы они существовали при запуске кода. (Или используйте событие jQuery ready, но нет необходимости в этом, если вы контролируете, куда идут теги скрипта.)

Вот пример, который добавляет высоты и т. Д .: Live Copy | Live Source

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Div Height And Such</title> 
</head> 
<body> 
    <div class="divOne">divOne</div> 
    <div class="divTwo">divTwo</div> 
    <div class="divThree">divThree</div> 
    <div class="divFour">divFour</div> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script> 
    var width = $(window).width(); 
    var height = $(window).height(); 
    $('.divOne').css({"height": height + "px"}); 
    $('.divTwo').css({ 
    "top": height + "px", 
    "height": "200px" 
    }); 
    $('.divThree').css({ 
    "top": (height + 200) + "px", 
    "height": "200px" 
    }); 
    $('.divTwo').css({ 
    "top": (height + 400) + "px", 
    "height": "200px" 
    }); 
    </script> 
</body> 
</html>

источник

2013-05-12 14:12:58

Это отлично выглядит, я буду тестировать его ... – Kev89

Работает как очарование. Большое спасибо, T.J. :) – Kev89

$('.divOne').css({ 
    "height": $(window).height() 
})

Попробуйте это ... Помните. До divOne

источник

2013-05-12 14:13:21 Jackson

Приятный улов на пропавших точках, +1, но кроме этого, это на самом деле не отвечает на вопрос ... –

Это то, о чем вы просите?

var height = $(window).height(); 
$('.divOne').css({"height": height+"px"}); 
$('.divTwo').css({"height": height+"px"}); 
$('.divTwo').css({"top": height+"px"}); 
$('.divThree').css({"top": height+200}); 
$('.divTwo').css({"top": height + 400});

источник

2013-05-12 14:15:46

вы также можете подумать о добавлении свойства «position: absolute» css в div или изменении «top» к «margin-top» –

Выглядит отлично. Спасибо! – Kev89

Выберите, что подходит вам лучше всего. Я предлагаю чистый JavaScript с переменными.

// NO VARIABLES 
    // pure JavaScript 
    document.getElementById("divOne").style.height = 
     document.documentElement.clientHeight; 
    document.getElementById("divOne").style.height = 
     document.documentElement.clientHeight; 
    document.getElementById("divOne").style.height = 
     parseFloat(document.documentElement.clientHeight) + 200 + "px"; 
    document.getElementById("divOne").style.height = 
     parseFloat(document.documentElement.clientHeight) + 400 + "px"; 

    // jQuery 
    $("#divOne").style.height = $(window).height(); 
    $("#divTwo").style.height = $(window).height(); 
    $("#divThree").style.height = parseFloat($(window).height()) + 200 + "px"; 
    $("#divFour").style.height = parseFloat($(window).height()) + 200 + "px"; 

// WITH VARIBLES 
    // pure JavaScript <-- SUGGESTED 
    var viewportHeight = parseFloat(document.documentElement.clientHeight); 
    document.getElementById("divOne").style.height = viewportHeight + "px"; 
    document.getElementById("divTwo").style.height = viewportHeight + "px"; 
    document.getElementById("divThree").style.height = 
     viewportHeight + 200 + "px"; 
    document.getElementById("divFour").style.height = 
     viewportHeight + 400 + "px"; 
    // jQuery 
    var viewportHeight = parseFloat($(window).height()); 
    $("#divOne").style.height = viewportHeight + "px"; 
    $("#divTwo").style.height = viewportHeight + "px"; 
    $("#divThree").style.height = viewportHeight + 200 + "px"; 
    $("#divFour").style.height = viewportHeight + 400 + "px";

источник

2013-05-12 14:26:30 Qvcool

Высота видового экрана и .css()

ответ

Смежные вопросы