How to Make <body> Take Up 100% of the Browser Height ?


#1

Hello & Thanks ,
I have applied your method from your article:
https://www.kirupa.com/html5/make_body_take_up_full_browser_height.htm
But it isn’t working for me .
I must be cancelling it out in some way .
Below is the code , pls show me wherein my error is.
Thanks

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>MyStory.html</title>
      <!--   
         file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory-Cancel-EnterKey-Green-WORKING-RESTART.html
         https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
         https://www.freeformatter.com/html-validator.html 
         <a href="https://developer.mozilla.org/en-US/" target="_blank">
         <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
         </a>
         still to do: intercept 'enter-key' replace with 8 spaces ELSE just cancel it .
         -->  
      <style type="text/css">
         body {
         font-family:Sans-serif;
//         height: 100%;
         min-height: 100%;
         margin: 0 auto;
         padding:0;
         }
         html {
         height: 100%; 
         margin: 0 auto;
         padding:0;
         border: 0;
         }
         .Table /*  wrapper  */
         {
         text-align: center;    
//         height: 100%; 
         min-height: 100%;
         margin: 0 auto;
         padding:0;
         margin: 0 auto;
         padding:0;
         }
         #mainHeading
         {
         text-align: center;
         width: 100%;
         background: #BCCE98;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #container {
//         min-height: 100%;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         overflow: hidden;
         margin: 0 auto;
         padding:0;
         }
         #Row1
         {
         display: block;
         width: 100%;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #Row2
         {
//         height: 100%;
//         min-height: 100%;
         display: block;    
         width: 100%;
         margin: 0 auto;
         padding:0;
         }
         #Row3
         {
         width: 100%;    
         margin: 0 auto;
         padding:0;
         display: inline;   
         }
         #Row1Cell1
         {
         color: #4C4C4C; 
         display: inline-block;   
         text-align: center;
         width: 100%;
         font-size: 18px
         }
         #Row2Cell1
         {
//         min-height: 100%;
         display: inline-block;   
         background-color: #DAE9BC;
         width: 20%;
         margin: 0 auto;        
         float: left;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell2
         {
//         min-height: 100%;
         display: inline-block;   
         text-align: center;
         width: 60%;
         background-color:#F8F8FF;
         margin: 0 auto;         
         float:left; 
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell3
         {
//         min-height: 100%;
         display: inline-block;   
         width: 20%;
         background: #e9f2d7; 
         margin: 0 auto;         
         float: right;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row3Cell1
         {
         display: inline-block;   
         width: 100%;
         background: #BCCE98;
         margin: 0 auto;    
         overflow: auto;      
         text-align: center;         
         }
         div{ 
         text-align: left;
         font-size: 14px
         }
         #p_bn {
         text-align: left;
         }
         #p_ah1 {
         color: #4C4C4C; /* color: #555555;  */
         text-align: left;
         font-size: 16px
         }
         #p_tgh1 {
         /*      color: #999999;  */
         color: #4C4C4C; 
         text-align: left;
         font-size: 14px
         }
         #currentPage_Address {
         color:#e9f2d7;
         }
      </style>
   </head>
   <body onload="documentURL()">
      <!-- Run me 1st -->
      <div class="Table">
         <!-- ============NewRow============== -->
         <div id="Row1">
            <div id="Row1Cell1">
               <p contenteditable="true" id="mainHeading"> myMainHeading</p>
            </div>
            <!-- <div class="Cell"  -->
         </div>
         <!-- <div class="Row"  -->
         <!-- ============NewRow============== -->
         <div id="container">
            <div id="Row2">
               <div id="Row2Cell1">
                  <p contenteditable="" id="p_Ln1" style="text-align: left;" style="color:#5886BC;"  onfocus="{has_Focus = 'p_Ln1'};" onclick="{has_Focus = 'p_Ln1'}">leftNotes</p>
               </div>
               <!-- <div class="Cell"  -->
               <div id="Row2Cell2">
                  <p contenteditable="" id="p_ah1" style="text-align: left;" onfocus="{has_Focus = 'p_ah1'}; " onclick="{has_Focus = 'p_ah1'}">Heading</p>
                  <p contenteditable="" id="p_tgh1"  style="text-align: left;" onfocus="{has_Focus = 'p_tgh1'}; " onclick="{has_Focus = 'p_tgh1'}">Text</p>  
               </div>  <!-- <div class="Cell"  -->
               <div id="Row2Cell3">
                  <p contenteditable="true" id="p_Rn1" style="text-align: left;" style="color:#576C15"  onfocus="{has_Focus = 'p_Rn1'};" onclick="{has_Focus = 'p_Rn1'}">rightNotes</p>
               </div>
               <!-- <div class="Cell"  -->
            </div>
            <!-- <div class="Row"  -->
         </div>
         <!--  id="container"  -->
         <!-- ============NewRow============== -->
         <div id="Row3">
            <div id="Row3Cell1">
               <br>
               <button onclick="createNote1Area()">Add Left Note</button>
               <button onclick="createArticleHeading()">Add Heading</button>
               <button onclick="createTextArea()">Add Text Paragraph</button>  
               <button onclick="createNote2Area()">Add Left Note</button>
<!--               <button onclick='createTextArea(); {p_tghCount = p_tghCount +1;   p_tgh = "p_tgh" + p_tghCount;   p_id = p_tgh;}; return false;'>Add Text Paragraph</button>  -->
               <form action="http://google.com" target="_blank" style="display: inline;">
                  <input type="submit" value="Search Google">
               </form>
               <button onclick="saveAs(filename, allHtml)">Save This Page</button>
               <p id="currentPage_Address">file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory-Cancel-EnterKey-Green-WORKING-RESTART.html</p>
            </div>
            <!-- id="Row3Cell1"  -->
         </div>
         <!-- <div class="Row"  -->
      </div>
      <!--  <div class="Table">  -->
      <script>
         var  ArticleHeading = "Heading";
         var  ButtonParagraph = "New Link";
         var  current_p_ah = "p_ah1";
         var  current_p_tgh = "p_tgh1";
         var  document_URL;
         var  document_URL;
         var  has_Focus = "none yet" ;
         var  LeftNote = "leftNotes";
         var  next_p_tgh = "p_tgh2";
         var  p_ah = "";
         var  p_ahCount = 1;
         var  p_id = "";
         var  p_Ln1 = "p_Ln1";
         var  p_Ln1Count = 1;
         var  p_Ln2 = "p_Ln1";
         var  p_Ln2Count = 1;
         var  p_tgh = "";
         var  p_tghCount = 1;
         var  pp_ah = "";
         var  pp_tgh = "";
         var  RightNote = "rightNotes";
         var  TextParagraph = "Text";
         var allHtml =  document.documentElement.outerHTML; 

         const  filename = "myStory.html";
         function documentURL() {
         document_URL = document.URL;
         document.getElementById("currentPage_Address").innerHTML = document_URL;  
         window.addEventListener("keydown", checkForEnterKeyDown, false);
         }
      </script>
      <script>
           var  fourSpaces = ".  .";
           var origContents = "";
           var newContents = "";
      function checkForEnterKeyDown(event){
        var keyPressed = event.keyCode || event.which;
        //if ENTER is pressed
        if(keyPressed==13)
        {
//            console.log('has_Focus= ' + has_Focus);
         // Change Paragraph content (innerHTML) .
//          To append something to text paragraph activate next 3 lines
//           origContents = document.getElementById(has_Focus).innerHTML ; 
//           newContents = origContents + ""; 
//           document.getElementById(has_Focus).innerHTML = newContents; 

         // Cancel onEnterKeyDown .
            event.preventDefault();
            event.stopImmediatePropagation();
        }
        else
        {
            return false;
        }
} 
      </script>
      <script contenteditable="">
         function createNote1Area() {
//                     console.log('has_Focus= ' + has_Focus);
//                     console.log('p_tghCount= ' + p_tghCount);
                     p_Ln1Count = p_Ln1Count +1;   
                     p_Ln1 = "p_Ln1" + p_Ln1Count;   
                     current_p_Ln1 = p_Ln1;
                     p_id = p_Ln1;
                     next_p_Ln1 = "p_tgh" + (p_Ln1Count +1);
//                     console.log('p_tghCount= ' + p_tghCount);
//                     console.log('current_p_tgh= ' + current_p_tgh);
//                     console.log('next_p_tgh= ' + next_p_tgh);
                   var pp_Ln1 = document.createElement("p");
                   pp_Ln1.innerHTML = TextParagraph;
                   pp_Ln1.setAttribute("contenteditable", "true");
                   pp_Ln1.setAttribute("id", current_p_Ln1);
                   pp_Ln1.setAttribute("style", "text-align: left");
                   var content = document.getElementById("Row2Cell2");
                   content.appendChild(pp_Ln1);
}	
      </script>	
      <script contenteditable="">
         function createTextArea() {
//                     console.log('has_Focus= ' + has_Focus);
//                     console.log('p_tghCount= ' + p_tghCount);
                     p_tghCount = p_tghCount +1;   
                     p_tgh = "p_tgh" + p_tghCount;   
                     current_p_tgh = p_tgh;
                     p_id = p_tgh;
                     next_p_tgh = "p_tgh" + (p_tghCount +1);
//                     console.log('p_tghCount= ' + p_tghCount);
//                     console.log('current_p_tgh= ' + current_p_tgh);
//                     console.log('next_p_tgh= ' + next_p_tgh);
                   var pp_tgh = document.createElement("p");
                   pp_tgh.innerHTML = TextParagraph;
                   pp_tgh.setAttribute("contenteditable", "true");
                   pp_tgh.setAttribute("id", current_p_tgh);
                   pp_tgh.setAttribute("style", "text-align: left");
                   var content = document.getElementById("Row2Cell2");
                   content.appendChild(pp_tgh);
}	
      </script>	
      <script contenteditable="">
         function createArticleHeading() {
           var pp_ah = document.createElement('p');
           pp_ah.innerHTML = ArticleHeading;
           pp_ah.setAttribute('contenteditable', 'true');
           pp_ah.setAttribute("id","p_ah");
           pp_ah.setAttribute("style", "text-align: left");
           var content = document.getElementById('Row2Cell2');
           content.appendChild(pp_ah);
         }
      </script> 
      <script contenteditable="">
         function createNote1Area() {
//                     console.log('has_Focus= ' + has_Focus);
//                     console.log('p_tghCount= ' + p_tghCount);
                     p_Ln1Count = p_Ln1Count +1;   
                     p_Ln1 = "p_Ln1" + p_Ln1Count;   
                     current_p_Ln1 = p_Ln1;
                     p_id = p_Ln1;
                     next_p_Ln1 = "p_tgh" + (p_Ln1Count +1);
//                     console.log('p_tghCount= ' + p_tghCount);
//                     console.log('current_p_tgh= ' + current_p_tgh);
//                     console.log('next_p_tgh= ' + next_p_tgh);
                   var pp_Ln1 = document.createElement("p");
                   pp_Ln1.innerHTML = TextParagraph;
                   pp_Ln1.setAttribute("contenteditable", "true");
                   pp_Ln1.setAttribute("id", current_p_Ln1);
                   pp_Ln1.setAttribute("style", "text-align: left");
                   var content = document.getElementById("Row2Cell2");
                   content.appendChild(pp_Ln1);
}	
      </script>	
      <script>
         function saveAs(filename, allHtml) {
           allHtml =  document.documentElement.outerHTML; 
          var blob = new Blob([allHtml], {type: 'text/csv'});
          if(window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveBlob(blob, filename);
          }
          else{
              var elem = window.document.createElement('a');
              elem.href = window.URL.createObjectURL(blob);
              elem.download = filename;        
              document.body.appendChild(elem);
              elem.click();        
              document.body.removeChild(elem);
          }
         }    
          
      </script> 
      <script contenteditable=""> 
         function createNewButton() {
           var p_bn = document.createElement("li");
           p_bn.innerHTML = ButtonParagraph;
           p_bn.setAttribute('contenteditable', 'true');
           p_bn.setAttribute("id","li-Default");
           var content = document.getElementById("nav-01");
           content.appendChild(p_bn);
         }
      </script> 
   
</body></html>

#2

Try setting the width value to 100vw and height to 100vh.


#3

Thanks , but
it doesn’t help .
I tried it on body html and Table wrapper .
Pls , what next ?
I have been struggling with for 2 weeks .
Thanks

      <style type="text/css">
         body {
         font-family: Comic Sans MS;
//         height: 100%;
//         min-height: 100%;
         margin: 0 auto;
         padding:0;
         height: 100vh; 
         width: 100vw; 
         }
         html {
//         height: 100%; 
         margin: 0 auto;
         padding:0;
         border: 0;
         height: 100vh; 
         width: 100vw; 
         }
         .Table /*  wrapper  */
         {
         text-align: center;    
//         height: 100%; 
//         min-height: 100%;
         margin: 0 auto;
         padding:0;
         margin: 0 auto;
         padding:0;
         height: 100vh; 
         width: 100vw; 
         }
         #mainHeading
         {
         text-align: center;
//         height: 100vh; 
         width: 100vw; 
         background: #BCCE98;
         color: DarkGreen;
//         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #container {
//         min-height: 100%;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         overflow: hidden;
         margin: 0 auto;
         padding:0;
         }
         #Row1
         {
         display: block;
         width: 100%;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #Row2
         {
//         height: 100%;
//         min-height: 100%;
//         height: 100vh ;
//         width: 100vw ;
         display: block;    
         width: 100%;
         margin: 0 auto;
         padding:0;
         }
         #Row3
         {
         width: 100%;    
         margin: 0 auto;
         padding:0;
         display: inline;   
         }
         #Row1Cell1
         {
         color: #4C4C4C; 
         display: inline-block;   
         text-align: center;
         width: 100%;
         font-size: 18px
         }
         #Row2Cell1
         {
//         min-height: 100%;
         display: inline-block;   
         background-color: #DAE9BC;
         width: 25%;
         margin: 0 auto;        
         float: left;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell2
         {
//         height: 100%;
//         height: 100vh ;
         display: inline-block;   
         text-align: left;
         width: 50%;
         background-color:#F8F8FF;
         margin: 0 auto;         
         float:left; 
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell3
         {
//         min-height: 100%;
         display: inline-block;   
         width: 25%;
         background: #e9f2d7; 
         color: #ADD8E6;
         margin: 0 auto;         
         float: right;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row3Cell1
         {
         display: inline-block;   
         width: 100%;
         background: #BCCE98;
         margin: 0 auto;    
         overflow: auto;      
         text-align: center;         
         }
         div{ 
         text-align: left;
         font-size: 14px
         }
         #p_bn {
         text-align: left;
         }
         #p_ah1 {
         color: DarkGreen; 
//         color: #555555;  
         text-align: left;
         font-size: 16px
         }
         #p_tgh1 {
         color: #4C4C4C; 
//         color: #999999;  
         text-align: left;
         font-size: 14px
         }
         #currentPage_Address {
         color:#e9f2d7;
         }
      </style>

#4

Kirupa suggestion of making the body height 100% does work. I took your page and stripped out the last two rows and gave the body a light green color to see it, and the browser showed the page rendering 100%. The best that I can determine is that it somewhere in your markup for the middle row that is causing you trouble. I say this because I changed the CSS for the last row to position: fixed; bottom: 0px; and it hugged the bottom of the browser window.


#5

Thanks REB_412
.

The best that I can determine is that it somewhere in your markup for the middle row that is causing you trouble.

.
Yes I agree , but I can’t figure it out.
Thanks


#6

Maybe it is because you do not have enough content in that middle row to expand to fill the whole browser window. What happens when you do have a lot of content there?


#7

Yes , when I fill up the middle part the window fills up and adds scrollbar .
I was hoping to expand the middle part to fill up the screen initially .
But it’s not heading that way .
Thanks


#8

When there is not enough content to fill a page, especially when someone is viewing a webpage on a very large monitor, and you might have a footer you want to keep down at the bottom, I would use css flexbox on an outer wrapper:

  display: flex; 
  flex-direction: column;
  justify-content: space-between;
   min-height: 100vh;

Your main div that needs to keep it’s maximum height, stretched to fill, even with little content you can set:

 flex: 1; 
 display: flex;
 align-items: center;
 justify-content: center;

The last three properties will center it’s content in the main div.


#9

Ok Thanks I’ll give it a shot .
Never used flex , heard lots of probs with flex .
Thanks