javascript - 调整屏幕大小时，表格会达到最大高度

Question

我有一个最小高度为 300 像素和最大高度为 650 像素的表格，这是完美的。唯一的问题是，当我调整窗口大小时，表格将一直向下延伸，直到显示其所有值。它应该有一个滚动条，这样您就可以在列表中移动，但一旦调整屏幕大小，滚动条就消失了，它只在一页上显示表格中的所有值。

CSS:

#tblPropertyGrid
{
    width: 250px; 
    min-height: 300px; 
    max-height: 650px; 
    font-size: 10px;
    overflow: scroll;
    margin-left:15px; 
}

HTML:

<div class='row'>
    <div class='thirdDiv' id="tabProperties">
        <script type="text/javascript">
                $(document).ready(function() {
                    $('#tblPropertyGrid').handsontable({
                        colHeaders: ["Name", "Value"],
                        colWidths: [115, 115],
                        maxCols: 2,
                        startCols: 2,
                        multiSelect: false,
                        afterSelectionEnd: function(row1, col1, row2, col2) {
                            $('.handsontableInputHolder').css('left', '114px');
                            $('.handsontableInputHolder').css('top', $('.htCore:first').children('tBody:first').children('tr')[row1].offsetTop + 'px');
                        },
                        afterChange: function(changes, source) {
                            if (changes != null && source == 'edit' && gridFilled)
                            {
                                var row = changes[0][0];
                                var col = changes[0][1];
                                var table = $('#tblPropertyGrid').handsontable('getInstance');
                                var currentItem = $(table.getCell(row, col));
                                var originalHTML = currentItem.html();
                                currentItem.html("EDITING...");

                                $.ajax({
                                    url: '@Url.Action("EditProperty", "Home")',
                                    type: "POST",
                                    data: { ID: Object.keys(selectedSections)[$(selectedSections).size() - 1], PropertyName: table.getCell(row, 0).innerHTML, NewValue: changes[0][3] } ,
                                    async: true
                                }).done(function(result) {
                                    if (result == "True")
                                    {
                                        currentItem.html(originalHTML);
                                        currentItem.css('background', 'lightgreen');
                                        currentItem.animate({backgroundColor:"white"}, 1500);
                                    }
                                    else
                                    {
                                        currentItem.html(originalHTML);
                                        currentItem.css('background', '#FF5959');
                                        //currentItem.animate({backgroundColor:"white"}, 1500);
                                    }
                                });
                            }
                        }
                    });

                    var table = $('#tblPropertyGrid').handsontable('getInstance');

                    while (table.countRows() > 1)
                    {
                        table.alter('remove_row', 1);
                    }

                    table.getCellMeta(0, 0).readOnly = true;
                    table.getCellMeta(0, 1).readOnly = true;

                    //Should show btnAdd?
                    if (GetURLParameter('id') != null)
                        $('#btnAdd').prop('disabled', false);
                    else
                        $('#btnAdd').prop('disabled', true);
                });
        </script>
        <h2 style="font-size: 14px;margin-top:20px" href="#tabProperties">Properties</h2>
        <div id="tblPropertyGrid"></div>
    </div>

Answer 1

表格具有“拉伸(stretch)以适合”的内置属性。

尝试将表格放在具有相同最大/最小高度和溢出属性的 div 中。