折りたたみパネルを展開したときに要素の幅を変更するにはどうすればよいですか？

Question

私は、Visual Studioに付属のWebアプリケーションテンプレートを使用しています。メインのコンテンツを他の2つのコンテンツプレースホルダに分割するネストされたマスターページを追加しました。両方とも、CSSのスタイリングが適用されたdivでラップされ、幅を制御します。 1つは、このネストされたマスターページから継承する各ページのメインコンテンツ領域として使用され、もう1つのコンテンツプレースホルダは、左から右に展開および折りたたむことができるサイドパネルとして使用されます。このサイドパネルは、ほとんどのページにわたって永続的です。そのため、コンテンツ・プレースホルダーの中で、カスタム・コンテンツを作成して空白のままにしたり、他のデータを使用したりすることができないようにする必要があります。この機能は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

に設定されている私はちょうど実現私はおそらく、2番目の折りたたみパネルエクステンダを追加して、これを解決することができ、ターゲットコントロールIDプロパティをメインパネルに設定し、そのトリガをs IDEパネル。このようにしてサイドパネルが拡張されると、メインパネルは崩壊し、その逆も同様である。次に、拡大と縮小のサイズを使用して、メインパネルの75％と95％の値を設定しました。これは私のハックのように思えますし、私はより現実的な解決法を好むでしょう。