Html 告诉一个div去接；尽可能多地保留高度”；

我有一个由九个小部件组成的网格。每个小部件都有一个

.widget页眉

，

.widget正文

，和

.widget页脚

.widget页眉

和

.widget页脚

的高度会有所不同，我想要

.widget主体

。只占用剩下的空间。

.widget主体

中的内容将按比例缩放

这里是我的：（你需要拉伸“结果”区域的宽度，这样你才能看到3x3的网格）

我的一个小部件：

<div class="widget widget-chart">
    <div class="widget-header">
        <h5>Socioeconomic: Middle Class and Performance: High</h5>
    </div>
    <div class="widget-body">
        <img src="http://www.mathgoodies.com/lessons/graphs/images/line_example1.jpg" />
    </div>
    <div class="widget-footer">
        <p>This is some footer content.</p>
    </div>
</div>

---

我很确定高度：自动没有执行任何操作，因为它可能已经是自动的。有什么想法吗？

您需要做的就是将页脚绝对定位到小部件容器的底部

如果您至少给小部件一个静态高度，那么它将工作得最好。而且页脚将始终粘在底部

.widget{
    height: 200px;
    width: 100%;
    position:relative;
}
.widget .widget-body{
    width: 100%;
    height: auto;
}
.widget .widget-foot {
    position:absolute;
    width:100%;
    bottom:0;
}

---

我跟随Peter的评论，最终使用了jQuery，因为小部件的其他方面无论如何都需要它。小部件不能设置高度，因为它基于窗口的高度和宽度

var resizeWidgets = function(){
    $('.widget').each(function(){
        var $widget = $(this);
        $wheader = $widget.find('.widget-header');
        $wbody = $widget.find('.widget-body');
        $wfooter = $widget.find('.widget-footer');

        $wbody.height($widget.height() - $wheader.outerHeight(true) - $wfooter.outerHeight(true))
    });
}

$(function(){
    $(window).on('resize', resizeWidgets);
    resizeWidgets();
});

---

我将使用display:table、table row和table cell来实现这一点

JSFiddle：

HTML

<div class="widget widget-chart">
    <div class="widget-header">
        <div class="widget-content">
            <h5>Socioeconomic: Middle Class and Performance: High</h5>
        </div>
    </div>
    <div class="widget-body">
        <div class="widget-content">
            <img src="http://www.mathgoodies.com/lessons/graphs/images/line_example1.jpg" />
        </div>
    </div>
    <div class="widget-footer">
        <div class="widget-content">
            <p>This is some footer content.</p>
        </div>
    </div>
</div>

---

可能是重复的，或者你可以完全移除高度，而页脚仍然会粘在底部，问题是如果小部件的高度不同，它看起来不像网格

<div class="widget widget-chart">
    <div class="widget-header">
        <div class="widget-content">
            <h5>Socioeconomic: Middle Class and Performance: High</h5>
        </div>
    </div>
    <div class="widget-body">
        <div class="widget-content">
            <img src="http://www.mathgoodies.com/lessons/graphs/images/line_example1.jpg" />
        </div>
    </div>
    <div class="widget-footer">
        <div class="widget-content">
            <p>This is some footer content.</p>
        </div>
    </div>
</div>

.widget {
    display: table;
    width: 100%;
    height: 100%;
}

.widget-header, .widget-body, .widget-footer {
    display: table-row;
}

.widget-content {
    display: table-cell;
    border: 1px solid red;
}

.widget-header, .widget-footer {
    height: 40px;
}