如何解决ligerUI布局时Center中的Tab高度大小

如何解决 LigerUI 布局时 Center 中的 Tab 高度大小？

在 LigerUI 布局中，我们通常使用模板 Center，将内容放置在中央区域，并采用 Tab 的形式对内容进行切换。然而，我们在使用 Center 和 Tab 时常常会遇到以下问题：

1. Tab 高度大小不够;

2. Tab 高度大小超过了父元素的高度。

接下来，我们将详细讲解这两种情况的解决方案。

Tab 高度大小不够

有时候，当使用 LigerUI 的 Tab 时，我们会发现 Tab 的高度大小不够，这是由于它的高度自适应其内容的而导致的。为了解决这个问题，我们可以通过重载 Tab 组件的 render 方法来实现自定义 Tab 的样式。

$.ligerDefaults.Tab = {   
    render: function () {   
        var g = this, p = this.options;   
        var jtab = $(g.element);   
        g.tab = $(g.element).addClass("l-tab").prepend("");

        // 增加自定义的样式内容
        $(p.content).each(function (i, box) {
            // 在每个内容框内部增加一个样式为 l-tab-content 的 DIV
            $(box).addClass("l-tab-content").wrap("<div class="l-tab-content-item"></div>");
        });
        ...
    }
};

通过以上代码，我们可以在 Tab 中的每个内容框内部增加一个样式为 l-tab-content 的 DIV，这样就可以有效地增加 Tab 的高度。

Tab 高度大小超过了父元素的高度

在某些情况下，当使用 LigerUI 的 Tab 时，我们会发现 Tab 的高度大小超过了他的父元素，这是由于其 Tab 项数量比较多，导致内容区高度自适应内容而超过了父元素的高度。为了解决这个问题，我们可以使用 CSS 来控制 Tab 的高度大小。

假设我们要控制 Center 中的 Tab 的高度为 300px，可以通过以下 CSS 代码来实现：

.l-layout-center .l-tab .l-tab-links 
{
    height: 30px; /*控制Tab头部高度 */
}

.l-layout-center .l-tab-content
{
    height: 270px; /*控制Tab内容高度*/
}

通过以上 CSS 代码，可以控制 Center 中 Tab 的头部高度为 30px，同时控制 Tab 内容的高度为 270px，这样就可以有效地控制 Tab 的高度大小不超过父元素的高度。

希望以上两个示例可以帮助您更好地解决在 LigerUI 中布局时 Center 中的 Tab 高度大小的问题。