css - 展开折叠面板时如何调整元素的宽度？

Question

我使用的是 visual studio 自带的 web 应用程序模板。我添加了一个嵌套的母版页，它将主要内容分成两个其他内容占位符，这两个占位符都包含在 div 中，div 应用了 css 样式以试图控制它们的宽度。一个用作从该嵌套母版页继承的每个页面的主要内容区域，另一个内容占位符用作可以从左到右展开和折叠的侧面板。此侧面板将在大多数页面中保持不变。这就是为什么它在内容占位符中，以便在不需要它的页面中可以创建自定义内容，然后将其留空或使用其他数据。此功能已通过 ajax 的可折叠面板扩展器实现，但主要内容区域的大小已锁定宽度。在我的 css 中，我在主要内容区域设置了最大宽度和最小宽度，但它只将其设置为最小宽度。在阅读 css 文档后，我发现 min-width 属性覆盖了 max-width 和 width 属性。我的问题是如何在侧面板折叠时使主要内容区域的宽度为 95%，在侧面板展开时使主内容区域的宽度为 75%？我已尽力包含尽可能多的相关信息，但如果需要更多信息，我会很乐意提供。

我的嵌套母版页中的相关标记

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div style="width: 100%; height: 100%;">
    <div class="leftSidePanel">
    <asp:ContentPlaceHolder ID="LeftSidePanelContent" runat="server">        
        <asp:Panel ID="Panel2" runat="server" CssClass="collapseLeftSidePanelHeader" >
            <div style="padding: 5px; cursor: pointer; vertical-align: middle;">
                <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/Images/CollapsiblePanel/expand_blue.jpg" AlternateText="(Show Details...)" />
            </div>
        </asp:Panel>
        <asp:Panel ID="Panel1" runat="server" CssClass="collapseLeftSidePanel" >
            <br />

            <asp:Label ID="Label1" runat="server" Text="MY PANEL"></asp:Label>
            </asp:Panel>
            <ajax:collapsiblepanelextender ID="cpeLeftSidePanel" runat="Server"
                ExpandedSize="250"
                CollapsedSize="0"
                ExpandDirection="Horizontal"
                TargetControlID="Panel1"
                ExpandControlID="Panel2"
                CollapseControlID="Panel2"
                Collapsed="True"
                TextLabelID="Label1"
                ImageControlID="Image1"
                ExpandedImage="~/Images/CollapsiblePanel/collapse_blue.jpg"
                CollapsedImage="~/Images/CollapsiblePanel/expand_blue.jpg"
                SuppressPostBack="true" />
    </asp:ContentPlaceHolder>
    </div>
    <div class="mainPanel">
        <asp:ContentPlaceHolder ID="MainPanelContent" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</div>

相关的 css:折叠面板的宽度在可折叠面板扩展器中设置

.main
{
    padding: 0em 1em;
    margin: 1em;
    width: 100%;
    min-height: 420px;
    border: thin solid black;
}

.mainPanel{
    max-width: 90%;
    min-width: 75%;
    height: 100%;
    float:right;
    border: thin solid green;
}

.leftSidePanel{
    min-width: 0;
    max-width: 20%;
    height: 100%;
    float: left;
    border: thin solid blue;
}


.collapseLeftSidePanelHeader{
    width:30px;
    height:100%;
    background-repeat:repeat-y;
    background-color: AliceBlue;
    font-weight:bold;
    float: right;
}

.collapseLeftSidePanel {
    background-color:black;
    overflow:hidden;
    width:0;
    height: 100%;
}

Answer 1

我刚刚意识到我可以通过添加第二个折叠面板扩展器并将其目标控件 id 属性设置为主面板并将其触发器设置为侧面板的标题来解决此问题。这样，当侧面板展开时，主面板将折叠，反之亦然。然后我可以使用展开和折叠尺寸来设置主面板的 75% 和 95% 值。这对我来说似乎是一个 hack，我更喜欢一个更务实的解决方案。