Question

我在动态添加div时遇到问题，并根据动态添加的内容调整父级的高度。

所以，我有一个名为#full-content-wrap的div，它的宽度除以两个子元素。这些元素称为.doubled-wrap-content-left和.doubled-wrap-content-right（让我们将其称为左包装和右包装）。那么，我有两个链接（或按钮，或其他），所以当我点击其中一个链接时，javascript动态地向左或右包装添加一个元素.doubled-table（根据我点击的链接）。所以，但我设置#full-content-wrap或左/右换行的高度有点问题。

当我将完全包裹的高度设置为auto，并且l-r将高度设置为auto时，它仍然是0px。当我设置100％ - 自动它仍然是100％并且添加的元素溢出父元素。所以我已经这样做了。我已经创建了一个函数，可以将完全包裹的高度调整到它的最大高度（左或右换行），当它为空时，调整为window.innerHeight。但是，它有点不舒服，它有两个缺点。 第一个是当我改变浏览器的大小时，然后我重新加载页面并最大化窗口，高度小于最大化窗口的innerHeight（当我打开inspect元素函数时会发生这种情况）。 第二个就是你可以意识到的，它是不必要的JS计数和高度设置。

问题是：如何在没有JS的情况下简单地在CSS中执行此操作？

类似的事情：Divs漂浮等我知道，我已经尝试将display设置为每个值。

其他问题请评论：/

<div id="full-content-wrap">

<div id="section-name">
    <span>Dashboard</span>
    <span class="section-subname">statistics and more</span>
</div>

<div id="doubled-wrap-content">
    <div id="doubled-wrap-content-left">
        <div class="doubled-table">
            <div class="table-header">
                <div class="caption">
                    <span class="fa fa-cogs"></span>
                    <span class="caption-content">Server Control</span>
                </div>

                <div class="tools">
                    <div class="picon-collapse"></div>
                    <div class="picon-remove"></div>
                </div>
            </div>
            <div class="table-body"></div>
        </div>
    </div>

    <div id="doubled-wrap-content-right">
    </div>
</div>

function setContentWrap () {

/* Set width for full-wrap-content */

var width = screen.width;
width -= 220;

var percent = ((width * 100) / screen.width);

$("#full-content-wrap").css({ width: percent + '%' });


/* Set height for full-wrap-content */

var left = $('#doubled-wrap-content-left')[0].offsetHeight;

var right = $('#doubled-wrap-content-right')[0].offsetHeight;

var sidePanel = $('.side-panel-menu')[0].offsetHeight;

var side = false;
var bigger = 0, b = "";
if (left > right) { bigger = left; b = "left"; }
else if (right > left) { bigger = right; b = "right"; }
else if (right == left) { bigger = right || left; }

if (bigger < sidePanel) {
    bigger = sidePanel;
    side = true;
}

var height = 0, j = 0;
$('#full-content-wrap').each(function () {
    var n = this.children;
    var length = this.children.length;
    for ( var i = 0; i < length; i++ ) {
        if (n[i].id == 'doubled-wrap-content') break;

        height += n[i].style.height || n[i].offsetHeight;
        j++;
    }
});

var more = 0;
$('#doubled-wrap-content').each(function () {
    if ( more < this.children.length ) {
        more = this.children.length;
    }
});

if (side == false) {
    height += bigger + (more * 60);
} else {
    height = window.innerHeight;
}
$('#full-content-wrap').css({ minHeight: height + 'px' });


var setTo = window.innerHeight;
if (parseInt($('#full-content-wrap').css('minHeight'), 10) <     window.innerHeight) {
    $('#full-content-wrap').css({ height: setTo + 'px' });
    //$('#full-content-wrap').css({ height: '100%' });
}

}

希望这一切。因为这里的空间是....哦

根据动态添加的元素调整高度

0 个答案: