我正在通过this示例，使我的div与页面/屏幕分辨率保持一致。即使这看起来很简单，但我不知道为什么它不与我合作。我在我的页面中做了同样的事但没有工作。
当鼠标悬停在容器div上时，它显示我在页面检查中的div.container 1066.39 x 18。
我的页面来源如下。
<%@ 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>
请帮忙。
--------编辑我的实际页面是BELLOW ---没有效果。
<%@ 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
</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
</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 :(得分：0)
您必须使用#form1选择器才能使其正常工作：
html,body {
height:100%;
}
#form1
{
width:80%;
height:80%;
background-color:green;
}
答案 1 :(得分：0)
所有父元素都应设置高度。您的表单元素没有设置高度，因此浏览器无法计算未知高度的80%。设置表单的高度：
html,
body,
form {
height: 100%;
}
.container {
width: 80%;
height: 80%;
background-color: green;
}