title: Why isn't 100% height and 100% width working in my ASPX page?
body: <p>The CSS and html alone work fine in a fiddle: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {
      height: 100%;
      min-height:600px;
      min-width:800px;
      overflow:hidden;
      margin:0;padding:0;
  }
  html {overflow:auto;}
  
  .fill {height:100%; width:100%; background-color:green;}
  
  .flex-container {   
      display: flexbox; 
      display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;      /* TWEENER - IE 10 */
      display: -webkit-flex;     /* NEW - Chrome */
      display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  }
  .flex-1 {
      -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1;         /* OLD - Firefox 19- */
      -webkit-flex: 1;          /* Chrome */
      -ms-flex: 1;              /* IE 10 */
      flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  }
  .flex-column {
      flex-direction:column; 
      -webkit-flex-direction: column; 
      -webkit-box-orient:vertical; 
      -moz-box-orient: vertical; 
      box-orient: vertical;
      -moz-flex-direction:column;
      -ms-flex-direction:column;
  }
  
  .centering { margin: auto; }
  
  .centre-form { width: 40%; max-width:400px; }
  
  .content-padding {padding:2.5%;}
  
  .profile-centre { width:70%; max-height:90% /*max-width: 1200px;*/}
  .profile-box {width: 46.6%; /*max-width: 560px;*/ max-height:80%; background-color:white; padding-top: 0.8%; padding-left: 0.8%; padding-right: 0.8%;}
  #lifestyle {height:80%;}
  .profile-form {margin-right:5px; margin-left:auto; padding-right:3%;}
  .profile-form-label {margin-right:0.8%}
  .profile-text-box {width:50%;}
  .profile-gender {width:25%; margin-right:25%;}
  .profile-date {width:16.7%;}
  .profile-slider {width:50%;}
  .profile-slider-label {margin-right:1%;}
  
  .create-centre {width:85%;}
  .create-form {width: 50%;}
  .create-form-inner{padding-right:30%; margin:0;}
  .create-text-box {width:50%;}
  .create-gender {width: 40%; margin-right: 10%;}
  .create-date {width:16.7%;}
  .create-lifestyle {width: 49%;}
  .create-lifetyle-form {width: 95%;}
  
  .statInput{width:10%};
  .statGraphContainer{height:300px; width:100%;}
  .statGraphSwap{cursor:pointer;}
  
  .left-align {float:left;}
  .right-align {float:right;}
  
  .y-scroll-only {overflow-y:auto; overflow-x:hidden; }
  
  
  .clearing {clear:both;}
  .hidden {display:none;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="div" class="fill" &gt;Div&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>however it does not work when included in my ASPX page, i have disabled and removed all other html content and javascript i previously added and the code behind file just contains an empty Page_Load method:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {
      height: 100%;
      min-height:600px;
      min-width:800px;
      overflow:hidden;
      margin:0;padding:0;
  }
  html {overflow:auto;}
  
  .fill {height:100%; width:100%; background-color:green;}
  
  .flex-container {   
      display: flexbox; 
      display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;      /* TWEENER - IE 10 */
      display: -webkit-flex;     /* NEW - Chrome */
      display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  }
  .flex-1 {
      -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1;         /* OLD - Firefox 19- */
      -webkit-flex: 1;          /* Chrome */
      -ms-flex: 1;              /* IE 10 */
      flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  }
  .flex-column {
      flex-direction:column; 
      -webkit-flex-direction: column; 
      -webkit-box-orient:vertical; 
      -moz-box-orient: vertical; 
      box-orient: vertical;
      -moz-flex-direction:column;
      -ms-flex-direction:column;
  }
  
  .centering { margin: auto; }
  
  .centre-form { width: 40%; max-width:400px; }
  
  .content-padding {padding:2.5%;}
  
  .profile-centre { width:70%; max-height:90% /*max-width: 1200px;*/}
  .profile-box {width: 46.6%; /*max-width: 560px;*/ max-height:80%; background-color:white; padding-top: 0.8%; padding-left: 0.8%; padding-right: 0.8%;}
  #lifestyle {height:80%;}
  .profile-form {margin-right:5px; margin-left:auto; padding-right:3%;}
  .profile-form-label {margin-right:0.8%}
  .profile-text-box {width:50%;}
  .profile-gender {width:25%; margin-right:25%;}
  .profile-date {width:16.7%;}
  .profile-slider {width:50%;}
  .profile-slider-label {margin-right:1%;}
  
  .create-centre {width:85%;}
  .create-form {width: 50%;}
  .create-form-inner{padding-right:30%; margin:0;}
  .create-text-box {width:50%;}
  .create-gender {width: 40%; margin-right: 10%;}
  .create-date {width:16.7%;}
  .create-lifestyle {width: 49%;}
  .create-lifetyle-form {width: 95%;}
  
  .statInput{width:10%};
  .statGraphContainer{height:300px; width:100%;}
  .statGraphSwap{cursor:pointer;}
  
  .left-align {float:left;}
  .right-align {float:right;}
  
  .y-scroll-only {overflow-y:auto; overflow-x:hidden; }
  
  
  .clearing {clear:both;}
  .hidden {display:none;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
      &lt;head runat="server"&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/&gt;
          &lt;title&gt;Title&lt;/title&gt;
  
          &lt;asp:PlaceHolder runat="server"&gt;
              &lt;%: Scripts.Render("~/bundles/modernizr") %&gt;
          &lt;/asp:PlaceHolder&gt;
  
          &lt;webopt:bundlereference runat="server" path="~/Content/css" /&gt;
          &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          
          &lt;form runat="server"&gt;
              &lt;asp:ScriptManager runat="server" EnablePartialRendering="true"&gt;
                  &lt;Scripts&gt;
                      &lt;%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%&gt;
                      &lt;%--Framework Scripts--%&gt;
                      &lt;asp:ScriptReference Name="MsAjaxBundle" /&gt;
                      &lt;asp:ScriptReference Name="jquery" /&gt;
                      &lt;asp:ScriptReference Name="bootstrap" /&gt;
                      &lt;asp:ScriptReference Name="respond" /&gt;
                      &lt;asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" /&gt;
                      &lt;asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" /&gt;
                      &lt;asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" /&gt;
                      &lt;asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" /&gt;
                      &lt;asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" /&gt;
                      &lt;asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" /&gt;
                      &lt;asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" /&gt;
                      &lt;asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" /&gt;
                      &lt;asp:ScriptReference Name="WebFormsBundle" /&gt;
                      &lt;%--Site Scripts--%&gt;
                  &lt;/Scripts&gt;
              &lt;/asp:ScriptManager&gt;
              &lt;div id="div" class="fill" &gt;Div&lt;/div&gt;
              
              
  
          
           
          &lt;/form&gt;
  
          
  
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>