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

我在动态添加div和根据动态添加的内容调整父级高度方面有问题

因此，我有一个名为

#full content wrap

的div，它的宽度除以两个子元素。这些元素称为

.double wrap content left

和

.double wrap content right

（我们称之为left wrap和right wrap）。因此，我有两个链接（或按钮，或其他什么），所以当我点击其中一个链接时，javascript会动态地向左或右换行（根据我点击的链接）添加一个元素

。double table

。所以，我对设置

#完整内容包装

或左/右包装的高度有点问题

当我将一个完整的cont wrap的高度设置为auto，并且将l-r wrap的高度设置为auto时，它仍然是0px。当我设置100%-auto时，它仍然是100%，并且添加的元素从父元素溢出。所以我是这样做的。我已经创建了一个函数，它可以将完全覆盖的高度调整为其内容的最大高度（左或右覆盖），当它为空时，调整为

窗口。innerHeight

。但是，这有点不舒服，而且有两个缺点第一个是，当我更改浏览器的大小，然后重新加载页面并最大化窗口时，高度小于最大化窗口的内部高度（这发生在我打开inspect element函数时）第二个正如您所意识到的，不需要计算和设置高度

问题是：如何在没有JS的CSS中简单地做到这一点

例如：div是浮动的，等等。我知道并且我已经尝试将

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>  

仪表板
统计数字及其他
服务器控制

函数setContentWrap（）{
/*设置全包装内容的宽度*/
变量宽度=屏幕宽度；
宽度-=220；
变量百分比=（（宽度*100）/屏幕宽度）；
$（“#完整内容包装”）.css（{width:percent+'%}）；
/*设置全包裹内容的高度*/
var left=$（“#将内容向左翻倍”）[0]；
var right=$（“#加倍包装内容右侧”）[0]。离视；
var sidePanel=$（'.side panel menu'）[0]。离视；
var-side=false；
var大于等于0，b=“”；
如果（左>右）{biger=left；b=“left”；}
如果（右>左）{biger=right；b=“right”；}
如果（right==left）{biger=right | | left；}
如果（更大<侧面板）{
更大=侧面板；
侧=真；
}
变量高度=0，j=0；
$（“#完整内容包装”）。每个（函数（）{
var n=此项。儿童；
变量长度=this.children.length；
对于（变量i=0；i

---

希望一切都好。因为这里的空格是…哦

而不是说你有什么，里面有什么，哪一个是左的，哪一个是右的，提供你的代码如果你在显示表格数据，最好使用

标签-表格压力不好，有时经验不足的人会捶打桶，但它们真的应该用于表格数据，而不是用于布局其他任何东西吗？我使用的是div，而不是table。我在这方面寻求帮助。我不想用这张桌子，因为原因是秘密的我认为，如果你把代码放在JSFIDLE中，我们就可以立即测试它，那么理解这个问题就会容易得多。我已经想出了如何做到这一点。我有固定的侧面板，上面板和表被添加到一个单独的分区。这个分区只调整页面中的位置，是一个容器。现在我添加了.left.right表，根据这个类名，它被定位在页面中。因此，当我添加表时，主体由其内容自动计算，这里显示溢出。当我移开这些桌子时，身体的高度就会调整。虽然排序不多，但谁能洞察PageInspect中动态生成的代码呢？我对这里的人有所了解。你只是没有说你拥有什么，你拥有什么，哪个是左的，哪个是右的，而是提供你的代码如果你正在显示表格数据，最好使用

标签-表格压力不好，有时经验不足的人会捶打桶，但实际上它们应该用于表格数据，只是不是为了停车还有别的吗？我使用的是div，而不是table。我在这方面寻求帮助。我不想用这张桌子，因为原因是秘密的我认为，如果你把代码放在JSFIDLE中，我们就可以立即测试它，那么理解这个问题就会容易得多。我已经想出了如何做到这一点。我有固定的侧面板，上面板和表被添加到一个单独的分区。这个分区只调整页面中的位置，是一个容器。现在我添加了.left.right表，根据这个类名，它被定位在页面中。因此，当我添加表时，主体由其内容自动计算，这里显示溢出。当我移开这些桌子时，身体的高度就会调整。是的

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%' });
}

}