Question

我有一个九个“小部件”的网格。每个小部件都有.widget-header，.widget-body和.widget-footer。

.widget-header和.widget-footer的高度会有所不同，我想要.widget-body。只占用剩下的空间。 .widget-body内的内容将缩放。

这是我的fiddle :(你需要拉伸“结果”区域的宽度，这样你才能看到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>

相关的CSS：

.widget{
    height: 100%;
    width: 100%;
}
.widget .widget-body{
    width: 100%;
    height: auto;
}

我很确定height: auto;没有做任何事情，因为它可能已经是自动的。有什么想法吗？

Answer 1

您需要做的就是将页脚绝对放在小部件容器的底部。

如果您至少给小部件一个静态高度，它将最有效。并且页脚将始终粘在底部..

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

Answer 2

我刚刚修好了您的样本，请点击此处：http://jsfiddle.net/aB5eN/2/

您可以在样式文件中添加此类：

.widget div { float: left; clear: both;}

干杯，

Answer 3

我遵循彼得的评论并最终使用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();
});

Answer 4

我会使用display：table，table-row和table-cell。

JSFiddle：http://jsfiddle.net/maximgladkov/ngyJt/

<强> 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>

<强> CSS

.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;
}

告诉div占据“剩下的高度”

4 个答案: