我有一个左侧边栏和内容区域的网站。一切都很好。我希望能够使用ajax控件工具包CollapsiblePanelExtender来折叠侧边栏。
我使用了下面的代码，但侧边栏显示，内容区域位于其下方。它就像面板实际上有一个宽松的东西，但我不确定。 我想要的是，siebar和内容区域显示正常，当用户想要侧边栏折叠并且内容填充屏幕的完整可用区域时。
任何帮助表示赞赏
HTML代码
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="MyTestWebsite.Site1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script src="assets/js/FAInteractions.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="590; URL=Login.aspx" />
<title>MyTestWebsite</title>
<meta name="keywords" content="application,control" />
<meta name="keywords" content="application,control" />
<meta name="description" content="Control Application" />
<link href="assets/css/Main.css" rel="stylesheet" type="text/css" />
<link href="assets/css/modalBackground.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="True">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<div id="HeaderWrapper">
<div id="Header">
<asp:Panel ID="Panel1" runat="server" CssClass="pnl">
<div style="float: left;">
Panel1
</div>
<div style="float: right;">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div style="clear: both">
</div>
</asp:Panel>
</div>
</div>
<div id="ContentWrapper">
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
CollapseControlID="Panel1" Collapsed="false" ExpandControlID="Panel1" TextLabelID="Label1"
CollapsedText="Show" ExpandedText="Hide" ExpandDirection="Vertical" TargetControlID="Panel2"
ScrollContents="false">
</ajaxToolkit:CollapsiblePanelExtender>
<asp:Panel ID="Panel2" runat="server">
<div id="Sidebar">
<asp:Accordion ID="AccordionMenu" CssClass="accordion" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
runat="server" Width="95%" Height="800px" FramesPerSecond="30" TransitionDuration="250">
<Panes>
<asp:AccordionPane ID="AccordionPaneConfigureDevice" runat="server">
<Header>
Configure Device</Header>
<Content>
<asp:Button CssClass="Button" ID="btnConfigureDevice" runat="server" Text="Configure Device"
Width="100%" OnClick="btnConfigureDevice_Click" />
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</div>
</asp:Panel>
<div id="Content" style="border: thin solid #666666" class="Tabs">
<asp:TabContainer ID="TabContainerMain" runat="server" ActiveTabIndex="4" Width="100%"
Height="100%" CssClass="" ViewStateMode="Enabled">
<asp:TabPanel ID="Tab_Configure_Device" runat="server" HeaderText="Tab_Configure_Device">
<ContentTemplate>
<div class="TabControls">
<p>
Howdy, I'm in Section Tab_Configure_Device .</p>
</div>
<div class="TabsAction">
</div>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</div>
<!-- end of wrapper -->
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
CSS
Main CSS File */
#HeaderWrapper
{
width: 100%;
clear: both;
height: 80px;
margin-top:2px;
margin-bottom:2px;
margin-right:0px;
margin-left:0px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFF, #9CF); /* for firefox 3.6+ */
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
border-bottom:thin solid #FFFFFF;
}
#Header
{
width:1024px;
margin: 0 auto;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
border-radius: 5px;
}
#ContentWrapper
{
width:1024px;
margin: 0 auto;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
border-radius: 5px;
}
/* sidebar */
#Sidebar {
float: left;
width: 184px;
padding: 0px;
height:800px;
border: thin solid #666666;
padding:0px;
border-radius: 0px;
margin-top:0px;
margin-bottom:0px;
margin-right:6px;
margin-left:0px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFF, #FFF); /* for firefox 3.6+ */
}
/* end of sidebar -->
/* content */
#Content {
float: left;
width: 824px;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
min-height:800px;
border-radius: 0px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFF, #FFF); /* for firefox 3.6+ */
}
/* End content */
/* End content */
html,body {
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.5em;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003366', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#FFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #036, #FFF); /* for firefox 3.6+ */
height: 100%;
}
/*Accordion */
.accordion {
width: 100%;
padding-left: 5px;
padding-right: 5px;
}
.accordionHeader {
border: 1px solid #003366;
color: white;
background-color: #003366;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 4px;
margin-top: 4px;
cursor: pointer;
border-radius: 5px;
}
.accordionHeaderSelected {
border: 1px solid #003366;
color: white;
background-color: #003366;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 4px;
margin-top: 4px;
cursor: pointer;
border-radius: 5px;
}
.accordionContent {
background-color: #FFFFFF;
border: 1px solid #003366;
border-top: none;
padding: 5px;
padding-top: 4px;
border-radius: 5px;
}
/*End Accordion */
/* Busy Form */
.updateProgress
{
border-radius: 5px;
}
/* Busy Form */
/* Logo */
#DivLogo
{
float: left;
margin-top:5px;
margin-bottom:0px;
margin-right:6px;
margin-left:0px;
padding-top:5px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
width: 140px;
height: 25px;
font-family: Arial, Sans-Serif;
font-size: 20px;
font-weight: bold;
}
/* End Logo */
/* Menu */
#DivMenu
{
float: left;
clear: left;
margin-top:12px;
margin-bottom:0px;
margin-right:6px;
margin-left:0px;
padding-top:5px;
padding-bottom:0px;
padding-right:0px;
padding-left:5px;
width: 205px;
height: 25px;
border-width: 1px;
border-style: solid;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.Menu
{
list-style: none;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
margin-top:1px;
}
.Menu ul
{
background:#003366;
}
.Menu ul li
{
background:#003366;
text-align:center;
/* set width if needed.*/
width:100px;
}
.Menu ul li a
{
color: White;
padding: 4px 2px 4px;
padding-left:8px !important;
}
.Menu ul li a:hover
{
background-image: none;
}
.Menu ul li a:hover
{
color: Black;
background:White;
}
.Menu ul li a
{
color: White;
}
/* End Menu*/
#DivUserDetails
{
float: right;
margin-top:13px;
margin-bottom:0px;
margin-right:5px;
margin-left:0px;
padding-top:5px;
padding-bottom:0px;
padding-right:20px;
padding-left:5px;
width: auto;
height: 25px;
border-width: 1px;
border-style: solid;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* About Modal */
#AboutContainer {
position:absolute;
height:300px;
width:440px;
top:10%;
left:35%;
}
#AboutInputContainer {
position:absolute;
height:100px;
width:300px;
top:10%;
left:20%;
color:Black;
}
/* End About Modal */
/* Signoff Modal */
#SignoffContainer {
position:absolute;
height:200px;
width:440px;
top:10%;
left:35%;
}
#SignoffInputContainer {
position:absolute;
height:100px;
width:300px;
top:10%;
left:20%;
color:Black;
}
/* End Signoff Modal */
/* Error Modal */
#ErrorContainer {
position:absolute;
height:300px;
min-height:300px;
max-height:100%;
width:440px;
top:10%;
left:35%;
overflow:auto;
}
#ErrorInputContainer {
position:absolute;
height:100px;
width:300px;
top:10%;
left:20%;
color:Black;
}
#lblErrorCode
{
}
#lblErrorMessage
{
}
#lblExMessage
{
}
/* End Error Modal */
/* Grids */
.mGrid { width: 100%; background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse;font-family:Verdana; font-size:12px;
table-layout:fixed;
}
.mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #003366; }
.mGrid th { padding: 4px 2px; color: #000000;
background: #99CCFF; font-size: 0.9em;border: solid 1px #c1c1c1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFF, #9CF); /* for firefox 3.6+ */
}
.mGrid .alt { background: #fcfcfc; }
.mGrid tr.data-row:hover { background-color:#FFFFCC; color:white; }
.mGrid .pgr {background: #FFCC33;
}
.mGrid .pgr table { margin: 5px 0;}
.mGrid .pgr td { border-width: 0px;
padding: 2px;
font-weight: bold;
color:Black;
line-height: 12px;
font-family: Arial, Sans-Serif;
font-size: 12px;
border-radius: 5px;
padding-left: 4px;
padding-right: 4px;
}
.mGrid .pgr a { color:Black; text-decoration: none; }
.mGrid .pgr a:hover { color:Black; text-decoration: none; }
.pgr span
{
padding: 5px;
text-decoration: none;
background: White;
border-radius: 5px;
}
/* End Grids */
.TabControls
{
margin-top:2px;
margin-bottom:2px;
margin-right:2px;
margin-left:2px;
padding-top:2px;
padding-bottom:2px;
padding-right:2px;
padding-left:2px;
width: auto;
border-width: 1px;
border-style: solid;
border-radius: 5px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFF, #9CF); /* for firefox 3.6+ */
height:120px;
}
.TabsAction
{
margin-top:2px;
margin-bottom:1px;
margin-right:2px;
margin-left:2px;
padding-top:5px;
padding-bottom:1px;
padding-right:5px;
padding-left:5px;
border-width: 1px;
border-style: solid;
border-radius: 5px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFF, #9CF); /* for firefox 3.6+ */
height:120px;
height: 660px;
overflow: auto;
/* Wrap all words in the grid so it fits in the window */
word-break : break-all;
}
/* TextBox */
.Textbox
{
width:auto;
padding:2px;
color:Black;
text-align:left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.Textbox:focus
{
background-color:#FFCC33;
}
/* End TextBox */
/* Button */
.Button
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
text-align:left;
padding-left:22px;
margin-top:1px;
margin-bottom:1px;
background-repeat: no-repeat;
background-image: url(/assets/img/action.gif);
background-position:3px 50%
}
.Button:hover
{
background: #FFCC33;
background-repeat: no-repeat;
background-image: url(/assets/img/action.gif);
background-position:3px 50%
}
/* End Button */