根据动态标题高度更改正文高度

Question

我有一个布局，其顶部可以增加高度，下面的内容部分包含图表。基本的 HTML 结构可以表征为：

<div class="wrapper">
    <div class="top">
        <span class="box">Box 0</span>
        <span class="box new">
            <button>+</button>
        </span>
    </div>
    <div id="chart">
       Chart
    </div>
</div>

每个box 元素都是固定的宽度和高度，并且是一种流畅的设计，因此当盒子不能放在同一条线上时，它们会环绕到下一个，从而使它们的容器 (top) 增长。

这是现阶段的交互式演示：http://jsfiddle.net/d1d6bwbc/，您可以在其中看到wrapper 是 100% 的宽度和高度（红色边框）。 top 有一个洋红色边框，并随着盒子需要换行而增长，chart 有一个蓝色边框。

我正在尝试使 chart 元素填充 wrapper 中剩余高度的 100%。

到目前为止，这是我的 css

body{margin:0}
.wrapper{
    position:absolute;
    border:1px solid red;
    height:calc(100% - 2px); /* account for border in this example */
    width:calc(100% - 2px); /* account for border in this example */
}

.top{
    border: 1px solid magenta;
    padding-bottom:5px
}

#chart{
    border: 1px solid blue;
    /* style chart to fill 100% of wrapper
}

我尝试了许多 css hack 和技巧，例如在 this question 和 this one too 中发现的那些，但它们似乎不适用于我的布局。

我可以完全控制布局，所以如果我的标记需要一些工作，那很好，但我想要的是一种简单的方法来实现对 chart 元素的填充。

Answer 1

我不确定这种行为是否可以通过纯 CSS 实现。 但是使用javascript很容易创建。 我已将此 JS 添加到您的示例中

var Fill = function (){
    var top =document.getElementById("top").offsetHeight;
    var wrapper =document.getElementById("wrapper").clientHeight;
    document.getElementById("chart").setAttribute("style","height:"+(wrapper-top-1)+"px");

}

var addEvent = function(elem, type, eventHandle) {
    if (elem == null || typeof(elem) == 'undefined') return;
    if ( elem.addEventListener ) {
        elem.addEventListener( type, eventHandle, false );
    } else if ( elem.attachEvent ) {
        elem.attachEvent( "on" + type, eventHandle );
    } else {
        elem["on"+type]=eventHandle;
    }
};

addEvent(window, "resize", Fill);
Fill();

还编辑了 addBox 函数来触发事件

self.addBox = function(){
        self.boxes.push(new Box(self.boxes().length));
        Fill();
    }

对于此示例，我还必须将 id 添加到 top 和 wrapper，但您显然可以使用 class。

这是工作的Fiddle

Answer 2

看起来是 CSS 表格布局的完美案例。将包装器设置为table，将顶部和底部框设置为table-row，将底部框设置为height:100%，将顶部框推到最小高度以适应里面的内容。

function ViewModel() {
    var self = this;

    self.boxes = ko.observableArray([new Box(0)]);

    self.addBox = function () {
        self.boxes.push(new Box(self.boxes().length));
    }
}

function Box(index) {
    self.text = "Box " + index;
}

ko.applyBindings(new ViewModel())

html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    border-collapse: collapse;
    border: 1px solid red;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}
.top {
    border: 1px solid magenta;
    display: table-row;
}
#chart {
    border: 1px solid blue;
    display: table-row;
    height: 100%;
}
.box {
    width: 150px;
    height: 50px;
    border: 2px solid black;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
}
.box.new {
    border: 1px dashed black;
}
.box.new button {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 3em;
    border: none;
    background: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="wrapper">
    <div class="top">
        <!-- ko foreach:boxes -->
        <span class="box" data-bind="text:text">            
        </span>
        <!-- /ko -->
        <span class="box new">
            <button data-bind="click:addBox">+</button>
        </span>
    </div>
    <div id="chart">
       Chart
    </div>
</div>

http://jsfiddle.net/d1d6bwbc/4/