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面板頁腳問題

回答

相關問題