CSS没有使用DIV asp.net c＃正确布局页面＃

时间：2014-08-13 12:35:17

标签： html css asp.net

我有以下aspx代码： - 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Testing.Event_Delegate.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>
<link href="../PI.css" rel="stylesheet" />

<html>
<head runat="server">
    <title></title>
</head>
<body>



    <form id="form1" runat="server">
            <div id="container">
                <div id="header">
                    <asp:Image ID="Image5" runat="server" Height="40px" ImageUrl="~/Event_Delegate/Images/parker-logo-big.jpg" />
                </div>
                <div id="QDetails">Question Details: </div>
                <div id="ContentMain">
                    <div id="contentInner">
                            <asp:HiddenField ID="HiddenField1" runat="server" />
                        <div>
                          <br />
                            <asp:Button ID="cmdStartInspection" runat="server" OnClick="cmdStartInspection_Click" Text="Start Inspection" />

                        </div>
                        <div id="Quesions">
                            <asp:Panel ID="panQT1" runat="server" Visible="False" DefaultButton="cmdProcess">
                                Question: &nbsp;&nbsp; <asp:Label ID="lblQuestion1" runat="server" Text=""></asp:Label>
                                <br /><br />
                                <asp:TextBox ID="txtQuestion1Input" runat="server" BackColor="#0099FF"></asp:TextBox>

                                <asp:Button ID="cmdProcess" runat="server" onclick="cmdProcess_Click" Text="Send Data to UserControl3" ViewStateMode="Enabled" />
                            </asp:Panel>
                            <asp:Panel ID="panQT2" runat="server" Visible="False">
                                Question: &nbsp;&nbsp; <asp:Label ID="lblQuestion2" runat="server" Text=""></asp:Label>
                                <br /><br />
                                <asp:Button ID="Button4" runat="server" Height="166px" OnClick="cmdProcess_Click" Text="Yes" Width="304px" ViewStateMode="Enabled" />
                                <asp:Button ID="Button5" runat="server" Height="163px" OnClick="cmdProcess_Click" Text="No" Width="362px" ViewStateMode="Enabled" />
                            </asp:Panel>
                            <asp:Panel ID="panQT3" runat="server" Visible="False">
                                Question Type 3
                            </asp:Panel>
                            <asp:Panel ID="panQT4" runat="server" Visible="False">
                                Question Type 4
                            </asp:Panel>
                            <asp:Panel ID="panQT5" runat="server" Visible="False">
                                Question Type 5
                            </asp:Panel>
                            <asp:Panel ID="panQT6" runat="server" Visible="False">
                                Question Type 6
                            </asp:Panel>
                        </div>
                        <br />
                            <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
                            <br />
                            My label result: 

                            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>


                    </div>
                </div>
                <div id="footer">2014</div>
            </div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">
                            </asp:ScriptManager>

                                    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                                TargetControlID="HiddenField1"
                                PopupControlID="Panel1"
                                BackgroundCssClass="modelBackground"
                                DropShadow="true"
                                CancelControlID="cmdCancel2"
                                ></asp:ModalPopupExtender>

                        <asp:Panel ID="Panel1" runat="server" CssClass="PopupModel">
                            <div class="PanelCancelDiv">
                                <asp:Image ID="Image1" runat="server" ImageUrl="~/Event_Delegate/Images/pat.png" />
                                <asp:ImageButton ID="cmdCancel2" runat="server" Height="32px" ImageUrl="~/Images/button_cancel.png" Width="32px" />
                                popup 1
                                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                            </div>       
                        </asp:Panel>


                            <asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server"
                                TargetControlID="HiddenField1"
                                PopupControlID="Panel2"
                                BackgroundCssClass="modelBackground"
                                DropShadow="true"
                                CancelControlID="cmdCancel2"
                                ></asp:ModalPopupExtender>

                        <asp:Panel ID="Panel2" runat="server" CssClass="PopupModel">
                            <div class="PanelCancelDiv">
                                <asp:Image ID="Image2" runat="server" ImageUrl="~/Event_Delegate/Images/fail at inbound marketing.gif" />
                                <asp:ImageButton ID="ImageButton1" runat="server" Height="32px" ImageUrl="~/Images/button_cancel.png" Width="32px" />
                                popup 2
                                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                                <asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="Button" />
                                <br />
                            </div>       
                        </asp:Panel>

                           <asp:ModalPopupExtender ID="ModalPopupExtender3" runat="server"
                                TargetControlID="HiddenField1"
                                PopupControlID="Panel3"
                                BackgroundCssClass="modelBackground"
                                DropShadow="true"
                                CancelControlID="cmdRetryTrue"
                                ></asp:ModalPopupExtender>

                        <asp:Panel ID="Panel3" runat="server" CssClass="PopupModel">
                            <div class="PanelCancelDiv">
                                <asp:Image ID="Image3" runat="server" ImageUrl="~/Event_Delegate/Images/exclamationmark.png" />
                                <asp:ImageButton ID="ImageButton2" runat="server" Height="32px" ImageUrl="~/Images/button_cancel.png" Width="32px" />
                                popup 3 - retry
                                <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label>
                                <asp:Button ID="cmdRetryTrue" runat="server" OnClick="cmdRetryTrue_Click" Text="I want to Retry" />
                                <br />
                            </div>       
                        </asp:Panel>
        </form>

</body>
</html>

和一个名为的文件： - 

.modelBackground 
{
    background-color:darkgray;
    filter: alpha(opacity=90);
    opacity:0.9;
}

.PopupModel 
{
    background-color:#EEEEEE;
    border-width:3px;
    border-style:solid;
    border-color:gray;
    font-family:Verdana;
    font-size:medium;
    padding: 3px;
    width:700px;
    height:320px;
}

.PanelSaveDiv 
{
    text-align:center;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: x-Small; 
    color: black; 
}

.PanelCancelDiv 
{
    text-align:right;
}

.LoadingPanel
{

    border-width:3px;
    border-style:solid;
    border-color:gray;
    width:200px;
    text-align:center;
}

.LoadingText
{
    font: bold 48pcontx arial;
    color:#FFD000;
}

#header,#footer, #SideMenu, #QDetails, #ContentMain{ position:absolute; right:0px; left:0
}

#header{
   height:40px; top:0; background-color:black;
}

#QDetails{
   height:25px; top:40px; background-color:white; vertical-align:middle; font-size:small;border-color:black; border-width:2px; border-style:solid;
}

#footer{
  height:20px; bottom:0; background-color:gold;
}
#contentInner{
  padding-left:4px;
  background-color:whitesmoke;
  width:950px;
  text-align:left;
  top: 90px;
  bottom:0px;
}

#ContentMain{
  left:0px;
  top:69px;
  bottom:20px;
  background-color:lightgray;
  text-align:center;
  overflow:hidden;

}

当我运行网页时，contentinner Div只显示其中控件的长度，当我希望它向下到页面的页脚时。

客户端结果： - 

    <!DOCTYPE html>
    <link href="../PI.css" rel="stylesheet" />

    <html>
    <head><title>

</title></head>
    <body>



        <form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="sAZsJpk8imorUV3y65KzO++hmGAL16j2QLeAp00u2T4H4atdZ+ox653indSc4fSyc7QdD8REjhVXuXUfxySfwEOphbOhVgNJtDT4n3iRzNjcB0TWn99SMq1IuF5tBlyt85N4Rdkikb9IT26dlWhpzFLOpXXyydNu4VBFZ5lJIJVd4/7xdxSYglffGQIsIEwK" />
</div>

<script type="text/javascript">
    //<![CDATA[
    var theForm = document.forms['form1'];
    if (!theForm) {
        theForm = document.form1;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    //]]>
</script>


<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZMFX7AG25V_UbHHFrzTqxS8hHb8suxso_NbfYfMDlipFxHAVTisOA8AkIeWYSvb4Pg2&amp;t=635201010466652144" type="text/javascript"></script>


<script src="/ScriptResource.axd?d=yeSNAJTOPtPimTGCAo3LldOdzL4yxKkG1GJzGr443EqpHL9QYBmni3_GNnN-G5FpIAs2ywu-n5HHig1BexaJBEEThbWmE6RFGU3Nmxpfr0jtIUpTIRw7zCNoZe3JdPTN0&amp;t=397b6a7" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
    if (typeof (Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
    //]]>
</script>

<script src="/ScriptResource.axd?d=DT3YJR8QaqV61-teuz0hgnOR81WY9ZF2ESyeR-qa0ACshSfGQu_gLHO1-wD6d6nQB_zirma2XdWdxiTUWMVwYnt_4z4a29ArHJ7V_ppJeQjGYuQSPZiKmB6nr8M1MazHZLRCggMibHY0SlxnqUe7SA2&amp;t=397b6a7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=HmPHS4c8DJOsyehLgTYT9PZXYCXgI9rsE-sut3TG3DR17GVdNhQ8_cQEMaZlZE3w5uKUOVmtwl_RG2tVjRb0MXQVHlmaOkaMWnBTpGYQR1u42ZhmZt_aajLEnHWNMpzz0&amp;t=397b6a7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=NoZa34-nMS7-Xc6gGOLpOlKCWesFEiDKZ7fyj_RK8AF2rItGeHzz-NjKqj2lY5ylv2-oJqorQuIavPc7173NLOAW9rix0nPkXzGuh3mNoA-Yl2XNtJrEWb3a55dgY-iXQxmwlMcv4T1BwJUNsB4dzQ2&amp;t=397b6a7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=jEItNninvr4u22-LzR10e0nUGsFIzvCGv1KaEUcPO85D7Nf9s3OkJZmy5pogcalXHKpPKbQoj0c_3eJLTBBQYmPCXPDMeK-I1DdYKKOAmXGT-4RmFu5WfPU1H06QqM8u9klyqT-tELihQm-HKxWAJw2&amp;t=397b6a7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=4_gab3U6BZ-MxaDo3nzgHvK_KXX9aNL6Bk_nM3TLvQ-SNs1FjdSAQ9Q_Cy_4bz8jVBsPPDvlPWnLEF03b06GVC4gTm5q-riWaOZcnqnEwMipRVvzSR_t1Y1sBFtpT095KMl17esIFxYBuNZGtxZjRg2&amp;t=397b6a7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=AnCYfyY1ZFu_laXqUokOu_H0bDjNKtkf6JaK82eIUZPezjhShMLMuhWgYZd4cPG94jwWmhT0ETyiPXEgxjFRINVdjUhYBp8KIL1qB0YvKWKQHyABXuo_8QpnVtcNoquRRiW8ir0e-4V6QMgG68LuuA2&amp;t=397b6a7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=Xb7KSyiKEiKe0cQgtciu8h-Lqfa_s6LGcefT2N9WsbRFfHI7u0Tb9uJqEU-4ecK0etyMFXdyNMmGw_LE5ubqkgR-OF8BNcrSW0Wtm-P16eiCgoiZsDftoiS_O2oWP-a0GcWWmUayXcBTLyWQJD49TaQ_9dOxJFbqXM1wzHfZ_O01&amp;t=397b6a7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=bVeQ_6BvdZp4dyuizlgXHbSbTMlfH7LfauVzMDub8S1GLlIXnUPfM8ElAJDWZOZFIUi41oGxNvYbnT67k95FQnM3fndMwnBgntevX6QmHszKRdj3Ijt8Aw2x_Sp0xLkR_QSj7xg9mFoVnRR46XM_hg2&amp;t=397b6a7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=5wXllp0R9IGmTo_t5PpL_wwn6jwA2MYtbAbrTSeCYEZfEmMchrswRL4lcdV7n0iVkUQqtcwlyqKsxqsJ8fRSX2B_v8Dwtg86kPQ4Ort-4RRMMZoUQBF9BFTVR-PFEmCZKl7kc9-iZaKE8bL_xGO29g2&amp;t=397b6a7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=GIDUvP_Wj4GjkKB3ra3W_x2jmnKcSK-jaLlmiPZGTeLc_Jmv7vsp3g3lDMeZyOmZJZsPSYusmA1CWq68NOvM-gqem0zzO5Kc4GiZlJZrc839jYh2cZ3kqLv_Xju-LrrdJEn-3gp-zU2gQZhooRLHew2&amp;t=397b6a7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=1AHLgR4ySIBARuX2YJ3TnyvFPAut77QLTyIwTWcYiA8kErQ0-MywxLJuzyPgHOaIB2HtuLWa-tfWDleXaDyo-aXDNDt4ThtYCm7T1qkNKgcEcpmrIYYVsXjitlnOw-olyXab2Lrq6zoGollmnnlB19YdE9JfLiJpDRPYisCdws01&amp;t=397b6a7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=nIvSuEKRnCvHD44ZZHjxbD0V-mveCZ9M4ehvw2M4r9DmOvYvxOHaj9ACunWJ0HGO5eL689lo63DFkCEEQpRlQ0efUOasuyKAHBxwhhCIkscLU2xHG9uZwwPnfqnoecj-FtQ5bfWDmI3ddRI7SCmqIw2&amp;t=397b6a7" type="text/javascript"></script>
                <div id="container">
                    <div id="header">
                        <img id="Image5" src="Images/logo-big.jpg" style="height:40px;" />
                    </div>
                    <div id="QDetails">Question Details: </div>
                    <div id="ContentMain">
                        <div id="contentInner">
                                <input type="hidden" name="HiddenField1" id="HiddenField1" />
                            <div>
                              <br />
                                <input type="submit" name="cmdStartInspection" value="Start Inspection" id="cmdStartInspection" />

                            </div>
                            <div id="Quesions">






                            </div>
                            <br />
                                <span id="Label4">Label</span>
                                <br />
                                My label result: 

                                <span id="Label1">Label</span>


                        </div>
                    </div>
                    <div id="footer">2014</div>
                </div>

            <script type="text/javascript">
                //<![CDATA[
                Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', [], [], [], 90, '');
                //]]>
</script>




                            <div id="Panel1" class="PopupModel">

                                <div class="PanelCancelDiv">
                                    <img id="Image1" src="Images/pat.png" />
                                    <input type="image" name="cmdCancel2" id="cmdCancel2" src="../Images/button_cancel.png" style="height:32px;width:32px;" />
                                    popup 1
                                    <span id="Label3">Label</span>
                                    <input type="submit" name="Button1" value="Button" id="Button1" />
                                </div>       

</div>




                            <div id="Panel2" class="PopupModel">

                                <div class="PanelCancelDiv">
                                    <img id="Image2" src="Images/fail%20at%20inbound%20marketing.gif" />
                                    <input type="image" name="ImageButton1" id="ImageButton1" src="../Images/button_cancel.png" style="height:32px;width:32px;" />
                                    popup 2
                                    <span id="Label2">Label</span>
                                    <input type="submit" name="Button2" value="Button" id="Button2" />
                                    <br />
                                </div>       

</div>



                            <div id="Panel3" class="PopupModel">

                                <div class="PanelCancelDiv">
                                    <img id="Image3" src="Images/exclamationmark.png" />
                                    <input type="image" name="ImageButton2" id="ImageButton2" src="../Images/button_cancel.png" style="height:32px;width:32px;" />
                                    popup 3 - retry
                                    <span id="Label5">Label</span>
                                    <input type="submit" name="cmdRetryTrue" value="I want to Retry" id="cmdRetryTrue" />
                                    <br />
                                </div>       

</div>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="D4XCV5a4nlSUdKCQRn8I7PMaZb0uog9HphMvwoYe7sWWk68V7K24uidVTVyB4mR9g52gDMMvHgu4ynldshj/SXr3TSXhBVxsoNoOpFzOBCH5u06pcnIfUnTEhc40SxXFGclOC2tjde82PJSpydNht16NhZxTPquKpcL7plVRN6FDTwIrzBIeD/DFlci9gYEezYFTm1cF9zhntNaLnPNTpS6dy9rzXWush/R9ZaGpqktQEMq4uZt2M+YXYNSYQrCeKE+7T28in0vuCswtgCgu7g==" />
</div>

<script type="text/javascript">
    //<![CDATA[
    Sys.Application.add_init(function () {
        $create(Sys.Extended.UI.ModalPopupBehavior, { "BackgroundCssClass": "modelBackground", "CancelControlID": "cmdCancel2", "DropShadow": true, "PopupControlID": "Panel1", "dynamicServicePath": "/Event_Delegate/WebForm1.aspx", "id": "ModalPopupExtender1" }, null, null, $get("HiddenField1"));
    });
    Sys.Application.add_init(function () {
        $create(Sys.Extended.UI.ModalPopupBehavior, { "BackgroundCssClass": "modelBackground", "CancelControlID": "cmdCancel2", "DropShadow": true, "PopupControlID": "Panel2", "dynamicServicePath": "/Event_Delegate/WebForm1.aspx", "id": "ModalPopupExtender2" }, null, null, $get("HiddenField1"));
    });
    Sys.Application.add_init(function () {
        $create(Sys.Extended.UI.ModalPopupBehavior, { "BackgroundCssClass": "modelBackground", "CancelControlID": "cmdRetryTrue", "DropShadow": true, "PopupControlID": "Panel3", "dynamicServicePath": "/Event_Delegate/WebForm1.aspx", "id": "ModalPopupExtender3" }, null, null, $get("HiddenField1"));
    });
    //]]>
</script>
</form>


<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Internet Explorer","requestId":"075ce9740b3e4d8584e85d3f2649df93"}
</script>
<script type="text/javascript" src="http://localhost:64757/c19785811a6d4428b7a64c60363edbed/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
    </html>

2 个答案:

答案 0 :(得分：0)

你没有给任何容器一个高度，所以一切都绝对定位，所有容器的初始高度都是0

尝试添加

html, body, form, #container { height:100%; }
#container { position:relative; }

Example

答案 1 :(得分：0)

如果设置contentinner div的高度是你所追求的，那么它一直向下延伸到页面的页脚，尝试将你的选择器处理为：

#contentInner{
 padding-left:4px;
 background-color:whitesmoke;
 width:950px;
 height:100%;
 text-align:left;
 top: 90px;
 bottom:0px;     
}
相关问题
最新问题