2016-05-19 12 views
0

私はdiv/pageの解像度に一貫性を持たせるために、thisの例を使っています。これは非常にシンプルに見えますが、なぜ私と一緒に働かないのか分かりません。私は私のページで同じことをしましたが、動作しません。ページの高さのパーセンテージとして固定されたDivの高さ

コンテナdivにマウスを置くとdiv.container 1066.39 x 18 in inspectが表示されます。

マイページソースは下のとおりです。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 

    <style type="text/css"> 
     .container 
     { 
      width:80%; 
      height:50%; 
      background-color:green; 
     } 
     html,body { 
      height:100%; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div class="container"> 
      adsf 
     </div> 
    </form> 
</body> 
</html> 

助けてください。

--------編集された私の実際のページは、だんだんと効果があります。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="CostParameter2.aspx.cs" Inherits="JobCosting.CostParameter2" %> 

<%@ Register Src="~/footerControl.ascx" TagPrefix="uc1" TagName="footerControl" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
    <style type="text/css"> 
     html, 
     body, 
     form { 
      height: 100%; 
     } 
     .containermain { 
      width: 100%; 
      height: 100%; 
      background-color: green; 
     } 
    </style> 

    <!-- page content --> 
    <div class="containermain"> 
    <div class="right_col" role="main"> 
     <div class="row"> 
      <asp:UpdatePanel ID="UpdatePanel2" runat="server"> 
       <ContentTemplate> 
        <div class="title_left mytitle_left"> 
         <div class="row"> 
          <div class="myform-group"> 
           <div class="col-md-9 col-sm-9 col-xs-9 form-group pull-left"> 
            <asp:TextBox ID="txtNameSearch" Height="32px" MaxLength="100" placeholder="Search by Cost Parameter Name" CssClass="form-control input-sm" runat="server"></asp:TextBox> 
           </div> 
           <div class="col-md-3 col-sm-3 col-xs-3 form-group myform-group pull-right" style="text-align: right; padding-right: 8px"> 
            <asp:Button ID="btnSearch" CssClass="btn btn-success input-sm" OnClick="btnSearch_Click" runat="server" Text="Search" /> 
            <asp:LinkButton ID="btnAdd" CssClass="btn btn-primary input-sm" OnClick="btnAdd_Click" runat="server"> 
            <span class="fa fa-plus" aria-hidden="true"></span> 
            Add&nbsp; 
            </asp:LinkButton> 
            <asp:LinkButton ID="btnPrint" CssClass="btn btn-info input-sm" OnClick="btnPrint_Click" runat="server"> 
            <span class="fa fa-print" aria-hidden="true"></span> 
            Print&nbsp; 
            </asp:LinkButton> 
           </div> 
          </div> 
         </div> 

         <div class="row"> 
          <div class="col-md-12 col-sm-12 col-xs-12"> 
           <div class="myx_panel"> 
            <div class="x_content myx_content"> 
             <div style="height: 30px; margin: 0"> 
              <table id="tblHeader" class="table table-condensed" 
               style="background-color: #2A3F54; color: white; border-collapse: collapse; height: 100%;"> 
               <tr> 
                <td class="col-md-9 col-sm-9 col-xs-9" style="text-align: left"> 
                 <asp:Label ID="lblCostName" runat="server" Text="Cost Parameter Name"></asp:Label> 
                </td> 
                <td class="col-md-1 col-sm-1 col-xs-1" style="text-align: left"> 
                 <asp:Label ID="lblPercentage" runat="server" Text="(%)age"></asp:Label> 
                </td> 
                <td class="col-md-1 col-sm-1 col-xs-1" style="text-align: left"> 
                 <asp:Label ID="lblActive" runat="server" Text="Active"></asp:Label> 
                </td> 
                <td class="col-md-1 col-sm-1 col-xs-1 col-md-pull-1" style="text-align: right; padding-right: 30px"> 
                 <asp:Label ID="lblOption" runat="server" Text="Option"></asp:Label> 
                </td> 
               </tr> 
              </table> 
             </div> 

             <div style="overflow: auto;"> 
              <asp:GridView ID="grdCost" runat="server" AutoGenerateColumns="False" 
               CssClass="table table-hover table-striped" ShowHeader="false" 
               DataKeyNames="CostID" 
               OnRowCommand="grdCost_RowCommand" OnRowDataBound="grdCost_RowDataBound" 
               BorderStyle="None" BorderWidth="0px" CellPadding="1" GridLines="None" Font-Size="Small"> 
               <Columns> 
                <asp:BoundField DataField="CostName"> 
                 <ItemStyle CssClass="col-md-9 col-sm-9 col-xs-9"></ItemStyle> 
                </asp:BoundField> 
                <asp:BoundField DataField="Percentage" DataFormatString="{0:0}%"> 
                 <ItemStyle CssClass="col-md-1 col-sm-1 col-xs-1"></ItemStyle> 
                </asp:BoundField> 
                <asp:BoundField DataField="Active"> 
                 <ItemStyle CssClass="col-md-1 col-sm-1 col-xs-1"></ItemStyle> 
                </asp:BoundField> 
                <asp:TemplateField HeaderText="Option"> 
                 <ItemTemplate> 
                  <asp:LinkButton ID="btnEdit" CommandName="editRecord" 
                   CommandArgument='<%# Eval("CostID") + "," + Eval("CostName") + "," + Eval("Percentage") + "," + Eval("Active")%>' runat="server"> 
                  <span class="glyphicon glyphicon-pencil" style="padding-left:30px"></span> 
                  </asp:LinkButton> 

                  <asp:LinkButton ID="btnDelete" CommandName="deleteRecord" 
                   CommandArgument='<%# Eval("CostID") + "," + Eval("CostName")%>' runat="server"> 
                   <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 
                  </asp:LinkButton> 
                 </ItemTemplate> 
                 <ItemStyle CssClass="col-md-1 col-sm-1 col-xs-1 col-md-pull-1"></ItemStyle> 
                </asp:TemplateField> 
               </Columns> 

               <RowStyle BackColor="White" ForeColor="#333333" /> 
              </asp:GridView> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 

         <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
          <ContentTemplate> 
           <asp:Panel ID="panel1" runat="server" Visible="false"> 
            <%--Add Record Area--%> 
            <div class="row"> 
             <div class="form-group"> 
              <div class="col-md-9 col-sm-9 col-xs-9 form-group myform-group pull-left"> 
               <asp:HiddenField ID="hfCostID" runat="server" /> 
               <asp:TextBox ID="txtCostName" Height="32px" MaxLength="100" CssClass="form-control myform-control input-sm" runat="server"></asp:TextBox> 
               <label>Cost Parameter Name</label> 
              </div> 
              <div class="mycol-md-4px mycol-xs-4px form-group myform-group pull-left"> 
               <asp:TextBox ID="txtPercentage" Height="32px" MaxLength="2" CssClass="form-control myform-control input-sm" runat="server"></asp:TextBox> 
               <label>(%)age</label> 
              </div> 
              <div class="mycol-md-4px mycol-xs-4px form-group myform-group pull-left"> 
               <div style="margin-top: 6px; margin-left: 4px"> 
                <asp:CheckBox ID="chkActive" runat="server" /> 
               </div> 
               <div style="margin-top: 4px; margin-left: 4px"> 
                <label>Active</label> 
               </div> 
              </div> 
              <div class="col-md-2 col-sm-2 col-xs-2 form-group myform-group pull-right" style="text-align: right; padding-right: 8px"> 
               <asp:LinkButton ID="btnSave" CssClass="btn btn-success input-sm" OnClick="btnSave_Click" runat="server"> 
             <span class="fa fa-download" aria-hidden="true"></span> 
             Save 
               </asp:LinkButton> 
               <asp:Button ID="btnCancel" CssClass="btn btn-danger input-sm" OnClick="btnCancel_Click" runat="server" Text="Cancel" /> 
              </div> 
             </div> 
            </div> 

            <div class="row"> 
             <div class="form-group" style="margin-top: -5px"> 
              <div class="col-md-9 col-sm-9 col-xs-9 form-group myform-group pull-left"> 
               <asp:RequiredFieldValidator ID="rfvCostName" 
                runat="server" ErrorMessage="*" 
                ControlToValidate="txtCostName" 
                ForeColor="Red" 
                ValidationGroup="vCost" 
                Display="Dynamic" Text="Cost Parameter Name is required."> 
               </asp:RequiredFieldValidator> 

               <asp:CustomValidator ID="cvCostName" runat="server" EnableClientScript="false" 
                ErrorMessage="Cost Parameter Name is already exist." 
                ControlToValidate="txtCostName" 
                ForeColor="Red" 
                OnServerValidate="txtCostName_Validate" Display="Dynamic"> 
               </asp:CustomValidator> 

              </div> 

              <div class="mycol-md-4px mycol-xs-4px form-group myform-group pull-left"> 
               <asp:RequiredFieldValidator ID="rfvPercentage" 
                runat="server" ErrorMessage="*" 
                ControlToValidate="txtPercentage" 
                ForeColor="Red" 
                ValidationGroup="vCost" 
                Display="Dynamic" Text="%"> 
               </asp:RequiredFieldValidator> 

               <asp:RangeValidator runat="server" ID="rvPercentage" 
                ControlToValidate="txtPercentage" 
                ForeColor="Red" 
                Type="Integer" MinimumValue="1" MaximumValue="99" 
                ValidationGroup="vCost" 
                ErrorMessage="1-99" /> 
              </div> 
             </div> 
            </div> 
           </asp:Panel> 
          </ContentTemplate> 
         </asp:UpdatePanel> 
         <div class="row"> 
          <div class="form-group" style="margin-top: -35px"> 
           <div class="col-md-10 col-sm-10 col-xs-10 form-group myform-group pull-left"> 
            <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label> 
           </div> 
          </div> 
         </div> 
        </div> 
       </ContentTemplate> 
      </asp:UpdatePanel> 
     </div> 

     <div class="clearfix"></div> 
     <div class="right_col myright_col_footer" role="main"> 
      <uc1:footerControl runat="server" ID="footerControl" /> 
     </div> 


    </div> 
    <!-- /page content --> 
    </div> 


</asp:Content> 

答えて

0

あなたはそれが機能するために#form1セレクターを使用する必要があります。

html,body { 
    height:100%; 
} 

#form1 
{ 
    width:80%; 
    height:80%; 
    background-color:green; 
} 

Fiddle here

+0

私は実際のページで私の質問を編集しました。よろしくお願いします。 – Raja

0

すべての親要素は、高さが設定されている必要があります。フォームの要素に高さが設定されていないため、ブラウザーは未知の高さの80%を計算できません。フォームの高さを設定してください:

html, 
body, 
form { 
    height: 100%; 
} 
.container { 
    width: 80%; 
    height: 80%; 
    background-color: green; 
} 
+0

すぐにお返事ありがとうございます。 masterpageを使用している場合はどうなりますか?私はdiffのために高さを決める必要がある実際に長いページhtmlを持っています。画面の解像度。 – Raja

+0

すべての親要素が '%'を使うためには高さを設定する必要があります。あなたは '.full-height {height:100%;}'のようなクラスを使用し、それをマスターページのすべての親要素に追加することができます... –

+0

私の編集した質問をご覧ください。私は、異なるスクリーン解像度を実現するために、プロジェクトのすべてのページを修正する必要があります。 :( 私を助けてください。 – Raja

関連する問題