Question

我在div中有几个div，我需要获得主div内空空间的高度和宽度。

我还没有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>

任何人都知道如何获得这个？

enter image description here

Answer 1

当调整大小窗口和加载页面时，您可以使用事件调整大小来计算所有div的高度和宽度

$(document).ready(function () {
      window.onresize = function () {
          RefreshSize();
      }

      RefreshSize();
});

然后如果每个div都有一个id，请使用高度和宽度

function RefreshSize(){
     var wCenterDiv = $(window).width() - $("#oneDiv").width() - $("#secondDiv").width();

     var hCenterDiv = $(window).height() - $("#oneDiv").height() - $("#secondDiv").height();
}

等等

看一下这个例子

http://jsfiddle.net/7W7b9/

Answer 2

通过

计算主区域

var area = $('#mainDiv').height() * $('#mainDiv').width()

然后计算每个子div的区域并添加它们

var subarea = 0;
$("#mainDiv > div").each(function(){
   subarea += $(this).height() * $(this).width()
});

获取空白区域

var emptyArea = area - subarea

你会告诉我：这是一个区域，而不是宽度和高度。

在您给出的示例中，空白空间不是矩形。所以它没有简单的宽度和高度。你可以得到的是它的区域。

现在，您可能需要两个分开的宽度/高度值，它们代表空白区域中的两个矩形。请在您的问题中指明。请在图片示例中添加数字/ ID，以便我们为您提供准确的答案。

获取div中可用空间的高度和宽度

2 个答案: