Bootstrap面板页脚问题

我正在建立一个使用Bootstrap作为基础的fluid-container聊天应用程序，因为它需要100％的高度和宽度的应用程序，但它似乎Bootstrap不喜欢这样，所以我已经结束了一些自定义CSS进行排序。Bootstrap面板页脚问题

这个想法是，有两个面板显示在页面上，聊天面板和用户面板和panel-body都应该自动溢出自己。

问题是，现在我也在使用panel-footer，它创建了这个奇怪的问题，在屏幕截图中看到。

这里是CSS：

.panel { 
    margin-bottom: 0; 
    height: 100vh; 
    max-height: 100vh; 
    position: relative; 
} 

.panel-body { 
    overflow: auto; 
    position: absolute; 
    top: 30px; 
    bottom: 30px; 
    left: 0; 
    right: 0; 
} 

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

顺便说一句，我是在自定义的CSS初学者，所以如果我使它更加混乱，然后它需要，它都可以简化，请告诉我！我很欣赏它:)

来源

2015-11-03 Jack

您能否为您的问题创建演示？不幸的是截图不会帮助我们找到问题。 –

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

是否有任何原因为什么定位面板身体和页脚取消？当给身体一个高度时，页脚自动粘到底部

来源

2015-11-03 15:49:04 AlexG

没有这些，我发现“发送消息”表单并没有坚持到底。 – Jack

正如我所说：给“.panel-body”固定的高度，页脚会自动粘在底部。 – AlexG

你的代码没有高度？ – Jack

类似的问题，只是我的页脚最终粘贴到页面的底部，而不是面板。下面是我的HTML（当我把这些东西放在一起时，所有东西都被剥离下来，用于测试）和最小的CSS（再次，当我得到这个工作时，所有东西都被剥离了）。

<div class="panel panel-default" style="height:100%;border:1px solid pink;"> <!-- border so I can see what's up --> 
<div class="panel-heading"> 
    <h4>Select or create case</h4> 
</div> 

<div class="panel-body" id="caseSelector"> 
<!-- empty during testing so as not to muddy the test--> 
</div> 

<div class="panel-footer case-panel-footer" style="border:1px solid cyan;"> <!-- border so I can see what's up --> 
    <div class="col-sm-6"> 
     <button class="btn btn-primary case-action-button" type="button" disabled="" data-action="select">Open case</button> 
    </div> 
    <div class="col-sm-6 text-right"> 
     <button class="btn btn-primary case-action-button" type="button" data-action="new">Create new</button> 
    </div> 
    <div class="clearfix"></div> 
</div>

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

我简直不能得到这个愚蠢的面板尺停放在面板的遏制区域的底部，即使粉红边界清楚显示面板占用了整个区域在容器中可用。

来源

2017-11-20 23:01:26 ChrisH

Bootstrap面板页脚问题

回答

相关问题