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

我过去也曾遇到过与display: table;混合的height类似的问题。大多数浏览器认为浏览器属性上的height实际上是min-height。如果桌子需要更高的高度，它只需要它......而且min + max-height不被Firefox考虑（但它们是Chrome浏览器）。

您最好的选择是在桌面内部执行自适应内容，使用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中，＆＃39; min-height＆＃39;和＆＃39; max-height＆＃39;表，内联表，表格单元格，表格行和行组未定义。

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

表格行的高度＆＃39;一旦用户代理具有行中的所有单元格，就会计算元素的框：它是行的最大值＆＃39; height＆＃39;，计算的＆＃39; height＆＃39; 39;行中的每个单元格，以及单元格所需的最小高度（MIN）。 A＆＃39;身高＆＃39; ＆＃39; auto＆＃39;的价值对于表格行＆＃39;表示用于布局的行高是MIN。 MIN取决于细胞盒高度和细胞盒对齐（非常类似于线盒高度的计算）。 CSS 2.1没有定义在使用百分比值指定高度时如何计算表格单元格和表格行的高度。 CSS 2.1没有定义＆＃39; height＆＃39;在行组。

在CSS 2.1中，单元格框的高度是内容所需的最小高度。表格单元格的高度＆＃39;属性可以影响行的高度（见上文），但它不会增加单元格的高度。

Answer 2

我同意使用媒体查询这是twitter bootstrap使用的默认媒体查询 https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

实施该媒体，您需要根据屏幕尺寸调整一些属性，如字体大小等，以满足您的需求

Answer 3

你可以尝试使文本响应，这会给你更多的空间。

或者您可以使用媒体查询删除特定高度的单元格之间的边距。

CSS表在div高度之外增长

3 个答案: