Height not 100% on Container Fluid in ASP.Net page

Question

Before I write this question I tried this solution but it doesn't work.

I have this layout in ASP.net page:

   

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="ToolDesign.Home" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Availability Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="/Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/Scripts/bootstrap.js"></script>

        <style>
      body {
          position: relative; 
      }
      #section1 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
      #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
      #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
      #section4 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
      #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}


      <!-- make page stretch -->
      html, body {
        height: 100%;
    }
    .container-fluid {
        height: 100%;
        overflow-y: hidden; /* don't show content that exceeds my height */
    }
    .body-film {
        min-height: 100%;
        overflow-y: hidden; /* don't show content that exceeds my height */
    }
      </style>
    </head>
    <body data-spy="scroll" data-target=".navbar" data-offset="60">

       <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>                        
          </button> 
          <a class="navbar-brand" href="#">Availability Tool</a>
        </div>
        <div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
              <li><a href="#section1">Home</a></li>
              <li><a href="#section2">Availability Test</a></li>
              <li><a href="#section3">Monitoring</a></li>
              <li><a href="#section4">About</a></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>    

    <div id="section1" class="container-fluid">
      <h1>Home section</h1>
      <p>Greeting text</p>

    </div>
    <div id="section2" class="container-fluid">
      <h1>Availability section</h1>
      
    </div>
    <div id="section3" class="container-fluid">
      <h1 style="text-align: center; font-size: 300%;; vertical-align: middle; line-height: 90px; margin-top: 100px;">Soon..</h1>
    </div>
    <div id="section4" class="container-fluid">
      <h1>About</h1>
      <p>Tool version and team name</p>

    </div>


    </body>
    </html>

the issue is that height wont fit the full screen as shown in below screenshot:

I'm using the latest version of Bootstrap 3.3.7

Always keep hierarchy in mind when dealing with height and percents. If you want a block to stretch 100%, all parents above that element must be 100% height as well. E.g., `html > body > div.div1 > div.div2 { height: 100%; }`. If you want `div.div2 { height: 100%; }`, you need to make sure you set the following accordingly `html, body, .div1 { height: 100%; }`. And in asp.net applications, you will most likely have a form tag just inside your body tag. Take that into account with your hierarchy when adding your CSS. — Pegues, Feb 28 '17 at 14:22
Also, make sure to use `* { box-size: border-box; }` when dealing with this particular kind of layout. You can then apply the bottom padding it looks like you need for the sticky footer. Your bottom padding, most likely assigned to the body tag, will be the same value as the height of your sticky footer. You then apply `position: fixed` to the sticky footer to always keep it at the bottom of the screen. — Pegues, Feb 28 '17 at 14:25
@Pegues yes dear thanks, you are right i solved the issue i will update the question — Omar, Mar 02 '17 at 08:15

IrishChieftain · Answer 1 · 2017-02-28T18:00:12.577

I've come across this problem before - creating a "sticky footer" with Web Forms. The issue was nearly always to do with the form tag which is automatically added in Web Forms project templates. Presuming everything else is correct in your markup and CSS, try this:

html, body, form
{
    height: 100%;
}

Armed with this knowledge of the "form" tag problem with Web Forms (the real problem being that we forget to add 'form' to our CSS selector), here is the basic theory of for creating sticky footers:

https://css-tricks.com/couple-takes-sticky-footer/

Haven't had time to try out your code, but I notice inline CSS, which you need to move to a style sheet, etc. Best suggestion is to create a simple form and master page for testing a solution - keep content short in your test page, then verify that it works.

thanks for your reply, i have tried to add `form` tag as you mentioned but still the same issue — Omar, Mar 02 '17 at 07:57

score 0 · Answer 2 · answered Mar 03 '17 at 12:15

(Posted on behalf of the OP).

The Answer

The issue was with the css style. First of all taking the section style:

  #section1 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
  #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
  #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
  #section4 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
  #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}

noticing that height:500px must be 100% since we need each section to fill in the screan.

Second we need to add the form tag in body style to be like as well moving all CSS which belong to body into this block:

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

Finaly we remove the unnecessary CSS and the final CSS code will be:

     html, body, form {
            height: 100%;
            position: relative;
        } 
  #section1 {padding-top:50px;height:100%;color: #fff; background-color: #009688;}
  #section2 {padding-top:50px;height:100%;color: #fff; background-color: #673ab7;}
  #section3 {padding-top:50px;height:100%;color: #fff; background-color: #ff9800;}
  #section4 {padding-top:50px;height:100%;color: #fff; background-color: #00bcd4;}

Height not 100% on Container Fluid in ASP.Net page

2 Answers2

The Answer