Question

我有以下代码：

<head>
    <style>
        #mainDiv {
            background-color: grey;
            position: absolute;
        }
        #one {
            height: 150px;
            width: 70px;
            bottom: 300px;
            right: 500px;
            background-color: green;
            position: absolute; 
        }
        #two {
            height: 200px;
            width: 200px;
            margin-top: 50px;
            margin-bottom: 20px;
            margin-left: 90px;
            margin-right: 5px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="mainDiv">
        <div id="one"></div>
        <div id="two"></div>
    </div>
</body>

我希望调整 #mainDiv 的大小，以便它包含其子项，并考虑所有定位和边距属性（基本上#mainDiv的灰色区域将围绕子项并可视地显示定位和边距空间）。 / p>

我知道无法使用CSS动态完成。我怎样才能使用纯JavaScript 实现这样做而不使用使用JQuery？

注意：对于孩子的位置属性没有限制，它可以是任何一个，但是“固定”。

代码需要支持所有主流浏览器+ IE8 + mobile（android 2.3 + 4，iphone）。

谢谢！

Answer 1

对第二个div使用position relative，这样mainDiv greay区域将围绕你的children元素

#mainDiv {
        background-color: grey;
        position: absolute;
    }
    #one {
        height: 150px;
        width: 100px;
        bottom: 300px;
        right: 500px;
        background-color: yellow;
    }
    #two {
        height: 200px;
        width: 200px;
        margin-top: 50px;
        margin-bottom: 20px;
        margin-left: 90px;
        margin-right: 5px;
        background-color: blue;
        position: relative;
    }

Answer 2

在你的情况下，由于某些逻辑原因，这是不可能的。怎么可能找到一个正确的位置为id 父母没有规模，因此没有可用的正确位置。

如果你使用左而不是右边的id一个情况变得更好。

一切顺利

尝试这个

    <script>
    window.onload = function() {
        var elems, max_top, max_right;
        elems = mainDiv.getElementsByTagName( 'div' );
        for( i = 0; i < elems.length; i++ ) {
            elem = elems[ i ].offsetLeft + elems[ i ].offsetWidth + elems[ i ].style.marginLeft;
            max_right = ( max_right > elem ) ? max_right : elem;

            elem = elems[ i ].offsetTop + elems[ i ].offsetHeight + elems[ i ].style.marginBottom;
            max_top = ( max_top > elem ) ? max_top : elem;
        }
        console.log( 't: ' + max_top + ', r: ' + max_right );
        mainDiv.style.height = max_top;
        mainDiv.style.width = max_right;

    }
    </script>

代码在获取边距时遇到了一些问题。

我找到了一个解决问题的好页面。

http://www.quirksmode.org/dom/getstyles.html

Answer 3

我做了一些可能很复杂的事情，你可以在这里找到：http://jsfiddle.net/YMmHz/1/

基本上我得到了所有可能的值：

var widthOne, widthTwo, heightOne, heightTwo;
var leftOne, leftTwo, rightOne, rightTwo, topOne, topTwo, botOne, botTwo;
var marginLeftOne, marginLeftTwo, marginRightOne, marginRightTwo, marginTopOne, marginTopTwo, marginBotOne, marginBotTwo;
var paddingLeftOne, paddingLeftTwo, paddingRightOne, paddingRightTwo, paddingTopOne, paddingTopTwo, paddingBotOne, paddingBotTwo;
var maxWidthOne, maxWidthTwo, maxHeightOne, maxHeightTwo;

进行不同的测试：

widthOne = $('#one').width();
widthTwo = $('#two').width();

(parseInt($('#one').css('left')))? leftOne = parseInt($('#one').css('left')):leftOne = 0;
(parseInt($('#two').css('left')))? leftTwo = parseInt($('#two').css('left')):leftTwo = 0;

然后像这样定义 #mainDiv 的大小：

(maxWidthOne>=maxWidthTwo)? $('#main_div').width(maxWidthOne):$('#main_div').width(maxWidthTwo);
(maxHeightOne>=maxHeightTwo)? $('#main_div').height(maxHeightOne):$('#main_div').height(maxHeightTwo);

使用“position：absolute”子项动态调整div元素的大小

3 个答案: