bootstrap 3：动态调整面板大小并将面板页脚保持在底部答案

【问题标题】：bootstrap 3: Dynamically re-size a panel and keep panel footer on bottombootstrap 3：动态调整面板大小并将面板页脚保持在底部
【发布时间】：2014-03-30 04:15:25
【问题描述】：

我正在调整面板的大小，使其与左侧列的高度相同。

Here a bootply link

我可以很好地调整大小，但面板页脚卡在顶部。解决这个问题的最佳方法是什么？

这是我正在使用的 js：

$(document).ready(function(){
    //Panels have a margin-bottom
    $topRightCol = $('.homepage-top-right-col .panel');
    $leftColHeight = $('.homepage-top-left-col').height() - 
        parseInt($topRightCol.css('margin-bottom')) -
        parseInt($topRightCol.css('borderBottomWidth'));
    $topRightCol.height($leftColHeight);

当我尝试像这样 ('.homepage-top-right-col).height($leftColHeight) 设置列类本身的高度时，它并没有增加高度，所以我修改了面板。

【问题讨论】：

标签： javascript css twitter-bootstrap-3

【解决方案1】：

嗯..你可以用一点额外的 CSS 来解决这个问题，如果你不反对的话，position:absolute。我添加了这些 CSS 样式：

.homepage-top-right-col > .panel{
    position:relative;
}
.homepage-top-right-col .panel-footer{
    position:absolute;
    width:100%;
    bottom:0;
}

这会导致右侧面板的.panel-footer 始终粘在其底部，无论面板的高度如何。这是一个JSFiddle 向您展示它所取得的成果。

希望这会有所帮助！如果您有任何问题，请告诉我。

【讨论】：

有点用，但右边的大面板高度不完全一样，看起来有点短。
确保将预览窗格扩展到全宽（因此它停止使用移动样式），然后刷新页面。您的 JavaScript 目前只计算一次高度，而对于移动样式，面板的组合高度会少一些。如果仅在页面加载后展开预览窗格，则高度将不匹配。