Question

我正在使用visual studio附带的Web应用程序模板。我添加了一个嵌套的母版页，它将主要内容分成另外两个内容占位符，这两个内容占位符都包含在div中，这些div应用了css样式以试图控制它们的宽度。一个用作从该嵌套母版页继承的每个页面的主要内容区域，另一个内容占位符用作可从左到右展开和折叠的侧面板。此侧面板将在大多数页面中保持不变。这就是为什么它在内容占位符中，以便在不需要它的页面中可以创建自定义内容，然后将其留空或使用其他数据。使用来自ajax的可折叠面板扩展器已实现此功能，但主内容区域的大小具有锁定宽度。在我的CSS中，我在主内容区域设置了max-width和min-width，但它只将它设置为min-width。在阅读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％值。这对我来说似乎是一种破坏，我宁愿采用更实用的解决方案。

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

1 个答案: