Question

CSS

#outer
{
position: relative;
z-index: 3;
width: 100%;
margin: 0px auto 0 auto;
background: #ffffff;
box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.2);
float:inherit;
}
#main
{
display:inline;
position: relative;        
padding: 0px 0px 0px 0px;
width: 100%;
}

#header
{
position: relative;
padding: 28px;
height: 125px;
background: #ffffff;
color: #ffffff;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
border-bottom: solid 1px #003B47;
}
#copyright
{
padding: 40px 0 80px 0;
text-align: center;
color: #777777;
}

HTML

<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div id="outer">
        <div id="header" style="background-color: lightgrey">
            </div>
    </div>

        <div id="main">
            <div id="sidebar" style="background-color: lightgrey">
            <div id="menubar">
                        <h2>
                            Menu
                        </h2>
            <ul class="linkedList">

                        <li>
                            <img id="img12" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
                            <a href="#">Server Search</a>
                        </li>
                        <li>
                            <img id="img13" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
                            <a href="Service_Status.aspx">Service Status</a>
                        </li>
                        <li>
                            <img id="img14" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
                            <a href="Default.aspx">Data Records</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="content">
                <div class="box">
                    <h2>
                        Member Details 
                    </h2>
                    <p>
                        <asp:UpdatePanel id="Up1" runat="server">
                         <contenttemplate>
                             Last Refreshed : <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><BR /><BR />
                         <asp:GridView id="gvMem_Details" runat="server" SkinID="Professional" OnRowDataBound="gvMem_Details_RowDataBound">
                         <RowStyle Width="500px"/>       
                         </asp:GridView> &nbsp;&nbsp;
                             <asp:Timer ID="Timer1" runat="server" Interval="600">
                             </asp:Timer>
                         </contenttemplate>
                         </asp:UpdatePanel><br class="clear" />
                    </p>
                </div>
                <div class="box">
                    <h2>
                        Reservation Details
                    </h2>
                    <p>                                        
                        <asp:UpdatePanel id="UpdatePanel1" runat="server">
                        <contenttemplate>
                            Last Refreshed : <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><BR /><BR />
                        <asp:GridView id="gvRes_Details" runat="server" SkinID="Professional" OnRowDataBound="gvRes_Details_RowDataBound">
                        </asp:GridView> &nbsp;&nbsp;
                            <asp:Timer ID="Timer2" runat="server" Interval="600">
                            </asp:Timer>
                       </contenttemplate>
                        </asp:UpdatePanel>
                    </p>
                </div>

                </div><br class="clear" />
        </div><br class="clear" />
    </div>
    <div id="copyright">
        &copy; Company. Design by <a href="http://www.venka.com/" rel="nofollow">Technies</a>.
    </div>
  </form>

我必须根据里面的内容来扩展我的div ...我有头部，身体和版权（较低）div ...我希望身体div大小应该是它的动态内容。

如何根据内容拉伸div

0 个答案: