Question

我有一个可调整大小的引导程序面板（使用jQuery UI可调整大小的插件）;我试图在<div> div中有panel-body，这将占用所有空间，例如。在重新调整大小时，让这个div占据整个面板的空间。

我认为定义一些CSS规则就足够了，例如设置height: 100%;和 width: 100%但它不起作用（为什么？我是CSS新手，遗憾的是我无法理解它为什么会失败）。我最终使用alsoResize来确保我的div与其父级同时调整大小，但结果并不令人满意。

我没有成功地尝试了其他魔法;无论如何，我不喜欢魔法;）

对于我的测试，我把背景颜色变成黄色;令人惊讶的是，在第一次调整大小之前<div>甚至没有出现！

任何帮助和一些解释都将不胜感激。

CSS：

.dashboard_panel {
    min-height: 200px;
}
.panel-body {
    min-height:200px;
    height:100%;
}
.mydiv {
    background-color:yellow;
    width: 100%;
    height: 100%;
}

HTML：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-md-12">
            <div class="panel panel-info dashboard_panel">
                <div class="panel-heading">id23/emotion/m0</div>
                <div class="panel-body">
                    <div class="mydiv"></div>
                </div>
            </div>
        </div>
    </div>
</div>

JS：

$(".dashboard_panel").resizable({
    alsoResize: ".mydiv, .panel-body"
});

和link to JSFiddle

Answer 1

我不确定这是否是你要找的，但添加这可能会有所帮助：

.panel-body {
    position: relative;
    min-height:200px;
    height:100%;
}

.mydiv {
    position: absolute;
    background-color:yellow;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Updated Fiddle

Answer 2

您的row-fluid和col-md-12正在添加填充（每个15px左右，总共30px）。

将row-fluid更改为row并删除col-md-12。面板将自动占据所有屏幕尺寸的全宽。

<div class="container-fluid">
    <div class="row">
        <div class="panel panel-info dashboard_panel">
            <div class="panel-heading">id23/emotion/m0</div>
                <div class="panel-body">
                    <div class="mydiv"></div>
                </div>
            </div>
        </div>
    </div>
</div>

如何使子div在可调整大小的自举面板中占据父级div的全部空间？

2 个答案:

Updated Fiddle