固定大小的自举面板,具有flex内容和标题

时间:2014-04-01 13:59:08

标签: css twitter-bootstrap

面板高度固定为300px,标题和内容可能会更改,但页脚应保持固定在底部。

实现这一目标的最佳方法是什么?

设置

.panel { 
   height : 250px;
}

.panel .panel-footer { 
 position : absolute;
 bottom : 0;        
}

导致页脚轻微滑出面板边框并失去宽度。 我试图找到一个尽可能少的固定尺寸的解决方案。

Bootply example here

感谢。

2 个答案:

答案 0 :(得分:3)

我认为这个解决方案可以帮到你

http://www.bootply.com/giovapanasiti/126477

答案 1 :(得分:1)

美好的一天!

面板滑出,因为它的包装底部有底边:0不占。

一个简单的解决方案就是应用这个css:

.panel {
    height : 250px;
    margin-bottom:0;
    position: relative;
}

.panel .panel-footer {
    position : absolute;
    bottom : 0;
    margin-bottom:1px;
    width : 100%;
}

http://www.bootply.com/126692