使页面大小适合包含?

时间:2015-03-18 10:08:26

标签: javascript html twitter-bootstrap

我有一个包含动态菜单项的母版页,当我展开菜单中的标题项时,如何使页面大小合适? 这是我的HTML代码:

<div id="divHader" class="collapse navbar-collapse navbar-ex1-collapse">
    <ul id="uiSideMenu" class="nav navbar-nav side-nav">
        <li class="active">
            <a href="/Default.aspx"><i class="fa fa-fw fa-dashboard"></i>Home</a>

            <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound1">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("HeaderMenuId")%>' Visible="false" ></asp:Label>
                    <a href="javascript:;" data-toggle="collapse"  onclick ="full_screen()" data-target='#<%# Eval("HeaderMenuId")%> '><i class="fa fa-fw fa-arrows-v"></i> <%# Eval("HeadItemText")%>  <i class="fa fa-fw fa-caret-down"></i></a>
                    <ul id='<%# Eval("HeaderMenuId")%>' class="collapse">
                        <asp:Repeater ID="Repeater2" runat="server">
                            <ItemTemplate>
                                <li  >
                                    <asp:Label ID="PID" runat="server" Text='<%# Eval("tblMenuItemID")%>' Visible="false" ></asp:Label>
                                    <a href="<%# Eval("MenuItemLink")%>"><%# Eval("MenuItemName")%></a>
                                </li>
                            </ItemTemplate>
                        </asp:Repeater>
                    </ul>
               </ItemTemplate>
           </asp:Repeater>
       </li>
    </ul>
</div>

我正在使用JavaScript来保持其大小=菜单大小+标题大小:

jQuery(document).ready(function ($) {
$(window).bind("load resize", function () {
    //alert($("divHader").height());
    topOffset = $("#divHader").height() + $("Footer").height();
    width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
    if (width < 768) {
        $('div.navbar-collapse').addClass('collapse')
        //topOffset = 100; // 2-row-menu
    } else {
        $('div.navbar-collapse').removeClass('collapse')
    }

    height = (this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height;
    height = height - topOffset;
    if (height < 1)
        height = 1;
    if (height > topOffset) {
        $("#page-wrapper").css("min-height", (height) + "px");
    }

    if (height < $("#uiSideMenu").height()) {

        $("#page-wrapper").css("min-height", ($("#uiSideMenu").height()) + "px");

        //alert($("#page-wrapper").height());
    }

    if (height > topOffset) {
        $("#uiSideMenu").css("top", ($("#divHader").height()) + "px");
    }

});

});

function showHeight(element, height) {
    $("div").text("The height for the " + element + " is " + height + "px.");
}
$("#getp").click(function () {
    showHeight("paragraph", $("#divHader").height());
});

但它不起作用!

0 个答案:

没有答案