Javascript 使用“position:absolute”子元素动态调整div元素的大小_Javascript_Html_Resize_Positioning

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

javascript html

Javascript 使用“position:absolute”子元素动态调整div元素的大小,javascript,html,resize,positioning,Javascript,Html,Resize,Positioning,我有以下代码： <head> <style> #mainDiv { background-color: grey; position: absolute; } #one { height: 150px; width: 70px; bottom: 300px; right: 5

我有以下代码：

<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>

我想调整MIVEDV的大小，这样它就包含了它的孩子，并且会考虑所有的定位和边缘属性，基本上，MIVEDI的灰色区域将包围孩子，并在视觉上显示定位和边缘空间。我知道它不能用CSS动态完成。我如何在不使用JQuery的情况下使用纯JavaScript实现这种功能

注意：子对象的位置属性没有限制，可以是任意一个，但已修复

代码需要支持所有主流浏览器+IE8+移动安卓2.3+4、iphone

谢谢

对第二个div使用相对位置，这样maindivgreay区域将围绕子元素

#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;
    }

在你的情况下，这是不可能的，因为一些逻辑原因。当id为1时，如何找到正确的位置父对象没有大小，因此没有可用的正确位置

如果您使用左而不是右作为id 1，则会出现这种情况变得更好

祝你一切顺利

试试这个

    <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>

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

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

我做了一些复杂的事情，你可以在这里找到：

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

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);

谢谢@Dinesh不幸的是，由于一些限制，我不可能这么做。在这种情况下，element.offsetLeft将返回负值。问题是我找不到一致的代码来重新计算divsize@ranweiz我知道。但是，当你把右边改成左边时，找到最左边和最上面的元素就变得容易多了。我同意，我确实写了一个代码来实现这一点。问题是你提到的右边和底部，这就是为什么我现在有点被卡住了是的，会检查网站谢谢，但是尽管硬编码的值在绝对位置和浮动位置上效果很好，但在相对位置上效果不太好。。。仍在试图找出allYes的神奇值，但在这种情况下，您不能检查$'one'.css'position'的值，如果它等于'relative'，您可以根据需要定义宽度和高度吗？