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％宽度＆amp;高度（红色边框）。 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黑客和技巧，例如this question和this one too中的那些，但它们似乎不适用于我的布局。

我完全控制了布局，所以如果我的标记需要一些很好的工作，但是实现chart元素填充的简单方法就是我所追求的。

Answer 1

看起来像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/

Answer 2

我不确定这种行为是否可以通过纯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();
    }

我还要为此示例向top和wrapper添加ID，但您可以明显使用该类。

这是工作Fiddle

根据动态标题高度更改主体高度

2 个答案: