I have been following a tutorial on adjusting the height of my div container based on page or screen resolution. Even though it seems simple, I am having trouble getting it to work on my own page.
When I hover over the container div in the page inspect tool, it shows dimensions as 1066.39 x 18.
Here is the source code of my page:
<%@ 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>
I would appreciate any help with this issue.
-------- THE SOURCE CODE OF MY ACTUAL PAGE THAT IS NOT WORKING AS EXPECTED ---
<%@ 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>
[...complex grid and form elements continue...]
</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>