Question

我在笔记本电脑的小屏幕上有类似此设计的页面

.k-grid-content {
    min-height: 200px;
    resize: horizontal;
    overflow: auto;        
}

_____________________________
|Content                    |
|                           |
|                           |
-----------------------------
| Grid                      |
|                           |
+---------+-----------------+
|Bottom Windows screen      |
|                           |
|Grid Bottom                |
|___________________________|

通常，将网格的最小高度设置为特定的大小，并且将网格底部放置在Windows屏幕底部下方，如果要查看网格底部，则必须向下滚动或通过鼠标拉伸网格，并且发生这种情况：

_____________________________
|Content                    |
|                           |
-----------------------------
| Grid                      |
|                           |
|                           |
|Grid Bottom                |
|___________________________|
|                           |
|                           |
|Bottom Windows screen      |
+---------+-----------------+

很明显，无论我花多少钱，网格始终保持其原始设置大小。像这样以最小高度将网格拖到最小高度时，有什么办法可以将网格底部保持在窗口底部？

_____________________________
|Content                    |
|                           |
-----------------------------
| Grid                      |
|                           |
|                           |
|                           |
|                           | 
|                           |
|                           |
|Bottom Windows/Grid bottom |
+---------+-----------------+

使用kendo tabstrip，这是完整的代码：

function AddReportTab(gridId, textTitle) {
    try {
        if (gridId) {
            var tabRemoved = document.getElementById("tab_" + gridId);
            if (tabRemoved) {
                RemoveTab(tabRemoved, gridId, true);
            }
        }

        tapstripBottom = $("#bottom-tabstrip").data("kendoTabStrip");
        reportArray.push(gridId);
        var newTab = {
            encoded: false,
            text: "<div id='" + "ReportTitle" + gridId + "' onclick='setBottomPanelHeaderCaption(this);'>" + textTitle + "</div>" + ' <i class="fa fa-close" id="tab_' + gridId + '" onclick="RemoveTab(this,\'' + gridId + '\', false);"></i>',
            content: "<div class=\"panel panel-default\" style=\"margin-top: 35px;\"><div id='ReportTab" + gridId + "'>" +   
            "<div class=\"panel-body grid-parent\"><div class=\"grid-bottom\" id='" + gridId + "'></div></div>" +
            "<div style='display:none' id='PopupGetLink" + gridId + "'></div>" +
            "</div>",
        }

        if (tapstripBottom.tabGroup.children().length == 0) {
            tapstripBottom.append(newTab);
        }
        else {
            tapstripBottom.insertBefore(newTab, tapstripBottom.tabGroup.children().eq(0));
        }

        verticalSplitter.expand(".k-pane:last");
        verticalSplitter.trigger("resize");

        tapstripBottom.select("li:first");
        setBottomPanelHeaderCaption($("#ReportTitle" + gridId)[0]);

        $("#" + "ReportTitle" + gridId + "").css({ "display": "inline-block" });
        if ($("#" + "ReportTitle" + gridId + "").width() > $(document).width() / 6) {
            $("#" + "ReportTitle" + gridId + "").css({
                "width": $(document).width() / 6, "white-space": "nowrap", "overflow": "hidden", "text-overflow": "ellipsis"
            });
        }


    } catch (exception) {
        window.location = userErrorPageUrl;
    }
}

这是我第一次打开它时的原始网格 enter image description here

在我用鼠标伸展时，在此显示网格 enter image description here

如您所见，网格底部的箭头指向不变，当我拉伸它时尺寸不变。我想使其自动适应底部屏幕

到达窗口底部时拉伸网格

0 个答案: