I have several div inside a div, I need to get the height and width of the empty space inside the main div.
我在div中有几个div,我需要获得主div内空空间的高度和宽度。
I do not have the javascript yet, since I do not know where to start.
我还没有javascript,因为我不知道从哪里开始。
HTML:
<body>
<div>
<div class="w1">
</div>
<div class="w2 h2">
</div>
<div class="w3 h2"></div>
</div>
CSS:
<style>
div {
border:1px solid #000;
width:1000px;
height:1000px;
position:relative;
}
div div {
border:1px solid red;
float:left;
height:300px
}
.w1 {
width:600px
}
.w2 {
width:395px;
}
.w3 {
width:300px;
top:-300px;
}
.h2 {
height:600px;
}
</style>
Any one has an idea how to get this?
任何人都知道如何获得这个?
2 个解决方案
#1
1
you can use the event resize for calculating height and width of all div when resize window and when page is loaded
您可以使用事件调整大小来计算调整大小窗口和加载页面时所有div的高度和宽度
$(document).ready(function () {
window.onresize = function () {
RefreshSize();
}
RefreshSize();
});
then if every div has an id, use height and width
然后,如果每个div都有一个id,请使用高度和宽度
function RefreshSize(){
var wCenterDiv = $(window).width() - $("#oneDiv").width() - $("#secondDiv").width();
var hCenterDiv = $(window).height() - $("#oneDiv").height() - $("#secondDiv").height();
}
and so on
等等
look this example
看这个例子
#2
0
Calculate the main area by making
通过制作来计算主要区域
var area = $('#mainDiv').height() * $('#mainDiv').width()
Then calculate each child div's areas and add them
然后计算每个子div的区域并添加它们
var subarea = 0;
$("#mainDiv > div").each(function(){
subarea += $(this).height() * $(this).width()
});
Get the empty area
获得空白区域
var emptyArea = area - subarea
You will tell me : this is an area, not the width and height.
你会告诉我:这是一个区域,而不是宽度和高度。
In the example you gave, the empty space isn't a rectangle. So it doesn't have a simple width and height. What you can get is it's area.
在您给出的示例中,空白空间不是矩形。所以它没有简单的宽度和高度。你能得到的是它的区域。
Now, you may want two separated width/height values which represents the two rectangles in your empty space. Please specify it in your question. And please add numbers/IDs to your image example so that we can give you a precise answer.
现在,您可能需要两个分开的宽度/高度值,表示空白区域中的两个矩形。请在您的问题中指明。请为您的图片示例添加数字/ ID,以便我们为您提供准确的答案。
#1
1
you can use the event resize for calculating height and width of all div when resize window and when page is loaded
您可以使用事件调整大小来计算调整大小窗口和加载页面时所有div的高度和宽度
$(document).ready(function () {
window.onresize = function () {
RefreshSize();
}
RefreshSize();
});
then if every div has an id, use height and width
然后,如果每个div都有一个id,请使用高度和宽度
function RefreshSize(){
var wCenterDiv = $(window).width() - $("#oneDiv").width() - $("#secondDiv").width();
var hCenterDiv = $(window).height() - $("#oneDiv").height() - $("#secondDiv").height();
}
and so on
等等
look this example
看这个例子
#2
0
Calculate the main area by making
通过制作来计算主要区域
var area = $('#mainDiv').height() * $('#mainDiv').width()
Then calculate each child div's areas and add them
然后计算每个子div的区域并添加它们
var subarea = 0;
$("#mainDiv > div").each(function(){
subarea += $(this).height() * $(this).width()
});
Get the empty area
获得空白区域
var emptyArea = area - subarea
You will tell me : this is an area, not the width and height.
你会告诉我:这是一个区域,而不是宽度和高度。
In the example you gave, the empty space isn't a rectangle. So it doesn't have a simple width and height. What you can get is it's area.
在您给出的示例中,空白空间不是矩形。所以它没有简单的宽度和高度。你能得到的是它的区域。
Now, you may want two separated width/height values which represents the two rectangles in your empty space. Please specify it in your question. And please add numbers/IDs to your image example so that we can give you a precise answer.
现在,您可能需要两个分开的宽度/高度值,表示空白区域中的两个矩形。请在您的问题中指明。请为您的图片示例添加数字/ ID,以便我们为您提供准确的答案。