获取DIV的jQuery宽屏幕窗口的高度和高度 [英] Get width and height of screen window and height of div jquery

问题描述

在简单的英语，这是jQuery的功能后，我是：

我需要得到的宽度和浏览器窗口的高度，然后让 .banner div的高度（高度自动）。如果 .banner div的高度比浏览器窗口中追加 .title伪 div的高度和更高的。社会 div来机构另有显示 .title伪内股利和股利。社会 .banner DIV。

我怎么那么相应风格的两个div（ .title伪和。社会）？

编辑：
这是我在HTML页面加载code：

 ＆LT; D​​IV CLASS =大旗＆GT;
   ＆LT; D​​IV CLASS =标题＆GT;
      ＆所述;！ - 被从左侧置于40像素 - ＆GT;
   ＆LT; / DIV＆GT;
   ＆LT; D​​IV CLASS =社交＆GT;
      ＆所述;！ - 被从右侧位置40像素 - ＆GT;
   ＆LT; / DIV＆GT;   ＆LT; IMG SRC =URL/＆GT; ＆LT;！ - 图片决定DIV的高度使用最大宽度 - ＆GT;＆LT; / DIV＆GT;
 

解决方案

您可以做类似如下：

  VAR WINDOWHEIGHT = $（窗口）.height（）; //为您提供了浏览器的视口的高度
。VAR bannerHeight = $（旗帜），高度（）;如果（bannerHeight＆GT; WINDOWHEIGHT）{
    $（机构）追加（$（）称号。'）;
    $（机构）追加（$（）社会。'）;    //然后你就可以使用jQuery的CSS样式它们
    //例
    $（'标题'）的CSS（'色'，'红'）。
}
其他{
    //显示.title伪和。社会在.banner DIV
}
 

• 的jQuery .height信息： http://api.jquery.com/height/


• 的jQuery的.css信息： http://api.jquery.com/css/

In plain English this is the jQuery functionality i'm after:

I need to get the width and the height of the browser window and then get the height of .banner div (height is automatic). If the height of .banner div is higher than that of the height of the browser window append .title div and .social div to the body otherwise display .title div and .social div within .banner div.

How do I then style the two divs accordingly (.title and .social)?

EDIT: This is my on page load code in HTML:

<div class="banner">
   <div class="title">
      <!--to be positioned 40px from the left-->
   </div>
   <div class="social">
      <!--to be positioned 40px from the right-->
   </div>

   <img src="URL"/> <!-- Image determines height of DIV uses max-width -->

</div>

解决方案

You can do something like below:

var windowHeight = $(window).height(); //Gives you the browser viewport height
var bannerHeight = $(".banner").height();

if (bannerHeight > windowHeight) {
    $("body").append($('.title'));
    $("body").append($('.social'));

    //Then you can style them using jQuery .css
    //Example
    $('.title').css('color', 'red');
}
else {
    //Display .title and .social in your .banner div
}

• jQuery .height info: http://api.jquery.com/height/
• jQuery .css info: http://api.jquery.com/css/

这篇关于获取DIV的jQuery宽屏幕窗口的高度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！