CSS桌子外面div高度增長

Question

大家早上好！

我正在嘗試使用基於％的大小製作表格。寬度工作正常，但我有高度問題。當用戶將屏幕大小調整到一定大小時，表格會停止降低其高度，並在div外擴展。下面的一些版畫：

正常大小

調整大小的屏幕

我已經試圖改變顯示，溢出，位置，都沒有成功。當涉及到一定的尺寸時，桌子就會停止降低高度。

下面的CSS表和育兒DIV：

.tblMotivos { 
    table-layout:fixed; 
    border: 0 solid white; 
    -moz-box-sizing: border-box; 
    width: 100%!important; 
    min-height: 100%!important; 
} 

.divFundoMotivos{ 
    padding: 0 !important; 
    background-color: white; 
    height:88%!important; 
} 

和HTML：

 <div class="col-sm-12 divFundoMotivos"> 
      <table class="tblMotivos" border="1" id="tblMotivos" style="table-layout:fixed;"> 
       <thead style="background-color:darkgray;"> 
        <tr style="border-color:white;"> 
         <td class="tdHeaderMotivos" style="width:44%;padding-left:1%;">Motivo</td> 
         <td class="tdHeaderMotivos" style="width:16%;">#</td> 
         <td class="tdHeaderMotivos" style="width:20%;">Meta</td> 
         <td class="tdHeaderMotivos" style="width:20%;">Perf.</td> 
        </tr> 
       </thead> 
       <tbody> 
        @if motivos.Count > 0 Then 
         @for each motivo As motivoRetencao In motivos 
          @<tr> 
           <td class="tdBodyMotivos" style="padding-left:2%;">@motivo.motivo</td> 
           <td class="tdBodyMotivos tdBodyMotivosValor">@motivo.qtde</td> 
           <td class="tdBodyMotivos tdBodyMotivosValor">@motivo.meta %</td> 
           <td class="tdBodyMotivos tdBodyMotivosValor fontWhite" style="@(If(motivo.performance >= motivo.meta, "background-color:green", If(motivo.performance >= ((motivo.meta * 85)/100), "background-color:yellow;color:black!important", "background-color:red")))">@motivo.performance %</td> 
          </tr> 
         Next 
        End If 
       </tbody> 
      </table> 
     </div> 

在此先感謝。最好的祝福。

Answer 1

我用媒體查詢 這裏同意是使用Twitter的引導 https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

執行該媒體的默認媒體查詢，則需要調整一些屬性，如字體大小等根據屏幕大小以適應您的需求

Answer 2

你可以嘗試使文本響應，這會給你更多的空間。

或者您可以使用媒體查詢刪除特定高度單元格之間的邊距。

Answer 3

我也有過類似的問題與css display: table;與height屬性混合在過去。大多數瀏覽器認爲瀏覽器屬性上的height實際上是min-height。如果桌子需要更高的高度，它會簡單地把它...和min + max-height不被Firefox（但他們是由鉻）認爲。

您最好的選擇是，要麼做響應裏面的內容表，使用inline-block或flexbox，而不是表或嘗試使用一些JavaScript的響應...

希望它能幫助。

指南，可以幫助你：

指南Flexbox的：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

指南中的CSS定心：https://css-tricks.com/centering-css-complete-guide/

參考文獻：

min-height and table cells

從：http://www.w3.org/TR/CSS21/visudet.html#propdef-max-height

在CSS 2.1，「最小高度」和上表，內聯的表，表格單元格，表中的行，並且行組「最大高度」的效果是未定義的。

從：http://www.w3.org/TR/CSS21/tables.html#height-layout

一個「錶行」的高度元件的盒子時計算一次所述用戶代理的所有單元格的行中可用的：它是計算的最大行的的「高度「，該行中每個單元的計算」高度「以及單元所需的最小高度（MIN）。 「表格行」的「高度」值「auto」表示用於佈局的行高度是MIN。 MIN取決於單元格高度和單元格對齊方式（很像計算線框高度）。當使用百分比值指定高度時，CSS 2.1不定義如何計算表格單元格和表格行的高度。 CSS 2.1沒有定義行組的「高度」的含義。

在CSS 2.1中，單元格框的高度是內容所需的最小高度。表格單元格的「高度」屬性可以影響行的高度（請參見上文），但不會增加單元格框的高度。