Высота заголовка JQGrid

Question

Я использую JQGrid в приложении ASP .NET MVC. Сама сетка работает отлично. Однако высота заголовка сетки (или первой сетки на странице) увеличивается, чтобы соответствовать высоте моего левого навигационного меню. Вот большая часть макета Site.Master, который у меня есть. Я просто не понимаю, почему это происходит.

<div class="page">
        <div>
            <div id="left">
                 <div id="leftnavmenu">
                       <%= Html.MvcSiteMap().Menu("MvcSiteMapProvider", "activenav")%>
                </div>

                <div id="leftnav-msg">
                        Message goes here
                </div>
            </div>

            <div id="main">
                <div id="mainsitename">
                    <div id="mainsitenameimage"></div>
                    <div id="mainsitename1">Intake Tool</div>                
                </div> 
                <div id="mainpagetitle">                 
                        <%--<%=Html.MvcSiteMap().SiteMapPath(" &gt; ") %>--%>
                        <asp:ContentPlaceHolder ID="PageTitle" runat="server" />
                </div>

                <asp:ContentPlaceHolder ID="MainContent" runat="server" />

                <div id="maintabledata">
                    <asp:ContentPlaceHolder ID="TableContent" runat="server" />
                </div>

                <div id="footer"></div>
            </div>
        </div>
    </div>

Answer 1

Я предполагаю, что #left имеет стиль float:left, а #main - нет. Это похоже на ошибку с jqGrid. Есть еще один пост , который посвящен точно такой же проблеме.

Я действительно создал jsFiddle пример , который иллюстрирует проблему.

В другом посте Олег предлагает вам использовать float: left на обеих сторонах <div> s, с другим div с clear: обоими после них. Это не будет работать в моем случае, потому что я хочу, чтобы правый div расширялся на всю оставшуюся ширину окна браузера. Плавающие <div> s должны иметь явную ширину, связанную с ними (если нет, они принимают ширину самого широкого элемента внутри них).

Один из обходных путей, который мне помог, - установить высоту плавающего <div> на что-то маленькое (1px) и установить явную высоту для содержимого этого div. Это показано в jsFiddle выше.