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

vmars316 · February 12, 2019

Hello & Thanks,

Can't get this working:

         body {
         font-family:Sans-serif;
         height: 100%;
         min-height: 100%;
         margin: 0 auto;
         padding:0;
         }
         html {
         height: 100%; 
         min-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;
         }

Here is full code:

<!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.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%; 
         min-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 {
         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
         {
         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
         {
         display: inline-block;   
         background-color: #DAE9BC;
         width: 20%;
         margin: 0 auto;        
         float: left;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell2
         {
         display: inline-block;   
         text-align: center;
         width: 60%;
         background-color:#F8F8FF;
         margin: 0 auto;         
         float:left; 
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell3
         {
         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_ah {
         color: #4C4C4C; /* color: #555555;  */
         text-align: left;
         font-size: 16px
         }
         #p_tgh {
         /*      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="" style="color:#5886BC;">notes</p>
               </div>
               <!-- <div class="Cell"  -->
               <div id="Row2Cell2">
                  <p contenteditable="" id="p_ah">Heading</p>
                  <p contenteditable="" id="p_tgh">Text Paragraph</p>
               </div>
               <!-- <div class="Cell"  -->
               <div id="Row2Cell3">
                  <p contenteditable="true" style="color:#576C15">notes</p>
               </div>
               <!-- <div class="Cell"  -->
            </div>
            <!-- <div class="Row"  -->
         </div>
         <!--  id="container"  -->
         <!-- ============NewRow============== -->
         <div id="Row3">
            <div id="Row3Cell1">
               <button onclick="createArticleHeading()">Add Heading</button>
               <button onclick="createTextArea()">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" > </p>
            </div>
            <!-- id="Row3Cell1"  -->
         </div>
         <!-- <div class="Row"  -->
      </div>
      <!--  <div class="Table">  -->
      <script>
         var  ArticleHeading = "Article Heading";
         var  TextParagraph = "Text Area";
         var  ButtonParagraph = "New Link";
         var  document_URL;
         const  filename = "MyStory.html";
         var allHtml =  document.documentElement.outerHTML; 
         var  document_URL;
         function documentURL() {
         document_URL = document.URL;
         document.getElementById("currentPage_Address").innerHTML = document_URL;  
         window.addEventListener("keydown", onPress_ENTER, false);

         }
      </script>
      <script>
      function onPress_ENTER(event){
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
//            alert('enter pressed');
            event.preventDefault();
            stopImmediatePropagation();
        }
        else
        {
            return false;
        }
} 
      </script>
      <script contenteditable="">
         function createTextArea() {
                   var p_tgh = document.createElement("p");
                   p_tgh.innerHTML = TextParagraph;
                   p_tgh.setAttribute("contenteditable", "true");
                   p_tgh.setAttribute("id","p_tgh");
                   var content = document.getElementById("Row2Cell2");
                   content.appendChild(p_tgh);
                 }	
      </script>	
      <script contenteditable="">
         function createArticleHeading() {
           var p_ah = document.createElement('p');
           p_ah.innerHTML = ArticleHeading;
           p_ah.setAttribute('contenteditable', 'true');
           p_ah.setAttribute("id","p_ah");
           var content = document.getElementById('Row2Cell2');
           content.appendChild(p_ah);
         }
      </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>

Thanks for your help .

dsonesuk · February 12, 2019

use height: 100% only for html, body NOT min-height

html, body {height: 100%;}

The apply min-height to the most outermost child container following after body tag ONLY

.Table {min-height: 100%;}

using min-height: 100% on child element/s within the parent .Table class won't do anything.

This setup will fill the screen from the start and content extending beyond browser window height will cause the html, body to extend to content height.

You can use 100vh, but! Using this for html, body tag means it won't extent with content as the first did.

vmars316 · February 12, 2019

Hmm...

When I remove the 'min-Height' and have just:

         body {
         font-family:Sans-serif;
         height: 100%;
         margin: 0 auto;
         padding:0;
         }
         html {
         height: 100%; 
         margin: 0 auto;
         padding:0;
         border: 0;
         }
         .Table /*  wrapper  */
         {
         text-align: center;    
         margin: 0 auto;
         padding:0;
         }

It still doesn't work .

What do I need to do now ?

Thanks

dsonesuk · February 12, 2019

Follow my full instructions in my last post.

vmars316 · February 12, 2019

Sorry I don't understand what you are saying :

Do I use min-height: 100% or not ?

And where should I put it ?

Thanks

vmars316 · February 15, 2019

Come on people give me a hand .

Here is my current code:

<!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.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: Comic Sans MS;
         height: 100%;
         margin: 0 auto;
         padding:0;
         }
         html {
         height: 100%; 
         margin: 0 auto;
         padding:0;
         border: 0;
         }
         .Table /*  wrapper  */
         {
         text-align: center;    
         margin: 0 auto;
         padding:0;
         }
         #mainHeading {
         color: #566573 ; 
         text-align: center;
         width: 100%;
         background: #BCCE98;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #container {
         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
         {
         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
         {
         display: inline-block;   
         background-color: #DAE9BC;
         width: 20%;
         margin: 0 auto;        
         float: left;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell2
         {
         display: inline-block;   
         text-align: left;
         width: 60%;
         background-color:#F8F8FF;
         margin: 0 auto;         
         float:left; 
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell3
         {
         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_ah {
         color: DarkGreen;
         text-align: left;
         font-size: 16px
         }
         .p_tgh {
         color: #566573; 
         text-align: left;
         font-size: 14px
         }
         #left_note {
         color:#5886BC;
         }
         #left_note {
         color:#576C15;
         }
         #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">MainHeading</p>
            </div>
            <!-- <div class="Cell"  -->
         </div>
         <!-- <div class="Row"  -->
         <!-- ============NewRow============== -->
         <div id="container">
            <div id="Row2">
               <div id="Row2Cell1">
                  <p contenteditable="" class="left_note" style="color:#5886BC;">notes</p>
               </div>
               <!-- <div class="Cell"  -->
               <div id="Row2Cell2">
                  <p contenteditable="" class="p_ah">Heading</p>
                  <p contenteditable="" class="p_tgh">Text</p>
               </div>
               <!-- <div class="Cell"  -->
               <div id="Row2Cell3">
                  <p contenteditable="true" class="right_note" style="color:#576C15">notes</p>
               </div>
               <!-- <div class="Cell"  -->
            </div>
            <!-- <div class="Row"  -->
         </div>
         <!--  id="container"  -->
         <!-- ============NewRow============== -->
         <div id="Row3">
            <div id="Row3Cell1">
               <br>
               <button onclick="createLeftNote()">Add Left Note</button>
               <button onclick="createArticleHeading()">Add Heading</button>
               <button onclick="createTextArea()">Add Text Paragraph</button>
               <button onclick="createRightNote()">Add Right Note</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" > </p>
            </div>  <!-- id="Row3Cell1"  -->
         </div>  <!-- <div class="Row"  -->
      </div>  <!--  <div class="Table">  -->
      <script>
         var  LeftNote = "LeftNote";
         var  ArticleHeading = "Heading";
         var  TextParagraph = "Text";
         var  RightNote = "RightNote";
         var  ButtonParagraph = "New Link";
         var  document_URL;
         var  filename = "myStory.html";
         var allHtml =  document.documentElement.outerHTML; 
         var  document_URL;
         function documentURL() {
         document_URL = document.URL;
         document.getElementById("currentPage_Address").innerHTML = document_URL;  
         window.addEventListener("keydown", onPress_ENTER, false);

         }
      </script>
      <script>
      function onPress_ENTER(event){
        var keyPressed = event.keyCode || event.which;
        //if ENTER is pressed
        if(keyPressed==13)
        {
//            alert('enter pressed');
            event.preventDefault();
            stopImmediatePropagation();
        }
        else
        {
            return false;
        }
} 
      </script>
      <script contenteditable="">
         function createTextArea() {
                   var p_tgh = document.createElement("p");
                   p_tgh.innerHTML = TextParagraph;
                   p_tgh.setAttribute("contenteditable", "true");
                   p_tgh.setAttribute("class","p_tgh");
                   var content = document.getElementById("Row2Cell2");
                   content.appendChild(p_tgh);
                 }	
      </script>	
      <script contenteditable="">
         function createArticleHeading() {
           var p_ah = document.createElement('p');
           p_ah.innerHTML = ArticleHeading;
           p_ah.setAttribute('contenteditable', 'true');
           p_ah.setAttribute("class","p_ah");
           var content = document.getElementById('Row2Cell2');
           content.appendChild(p_ah);
         }
      </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>

Thanks

dsonesuk · February 15, 2019

The reason I didn't answer, is I thought common sense would have prevailed because as I see it you have two options

(1) Add min-height:100% to wrapper and see what happens? that simple!

(2) Came here ask for more help and be embarrassed why you didn't just think of doing that in the first place.

vmars316 · February 15, 2019

Ouch !

Been there done that ,

it doesn't help .

         body {
         font-family: Comic Sans MS;
         height: 100%;
         margin: 0 auto;
         padding:0;
         }
         html {
         height: 100%; 
         margin: 0 auto;
         padding:0;
         border: 0;
         }
         .Table {/*  wrapper  */
         min-height:100%;
         text-align: center;    
         margin: 0 auto;
         padding:0;
         }

As a matter of fact I tried min-height:100% ; in Body , Html and Table .

None of it works !

I must be cancelling it out in other ways .

Speaking of your common sense remark reminds me of an incident with my dad when I was 10yrs old .

He had just purchased a mechanical lawn trimmer .

Each time he sent me out I came back saying . "It doesn't work" .

So finally I said "Why don't you show me how".

So he tried and tried , cursing all time . Finally , he threw it down and said "This piece of **** doesn't work".

Anyways , here is the full code:

<!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.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: Comic Sans MS;
         height: 100%;
         margin: 0 auto;
         padding:0;
         }
         html {
         height: 100%; 
         margin: 0 auto;
         padding:0;
         border: 0;
         }
         .Table {/*  wrapper  */
         min-height:100%;
         text-align: center;    
         margin: 0 auto;
         padding:0;
         }
         #mainHeading {
         color: #566573 ; 
         text-align: center;
         width: 100%;
         background: #BCCE98;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #container {
         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
         {
         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
         {
         display: inline-block;   
         background-color: #DAE9BC;
         width: 20%;
         margin: 0 auto;        
         float: left;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell2
         {
         display: inline-block;   
         text-align: left;
         width: 60%;
         background-color:#F8F8FF;
         margin: 0 auto;         
         float:left; 
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell3
         {
         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_ah {
         color: DarkGreen;
         text-align: left;
         font-size: 16px
         }
         .p_tgh {
         color: #566573; 
         text-align: left;
         font-size: 14px
         }
         #left_note {
         color:#5886BC;
         }
         #left_note {
         color:#576C15;
         }
         #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">MainHeading</p>
            </div>
            <!-- <div class="Cell"  -->
         </div>
         <!-- <div class="Row"  -->
         <!-- ============NewRow============== -->
         <div id="container">
            <div id="Row2">
               <div id="Row2Cell1">
                  <p contenteditable="" class="left_note" style="color:#5886BC;">notes</p>
               </div>
               <!-- <div class="Cell"  -->
               <div id="Row2Cell2">
                  <p contenteditable="" class="p_ah">Heading</p>
                  <p contenteditable="" class="p_tgh">Text</p>
               </div>
               <!-- <div class="Cell"  -->
               <div id="Row2Cell3">
                  <p contenteditable="true" class="right_note" style="color:#576C15">notes</p>
               </div>
               <!-- <div class="Cell"  -->
            </div>
            <!-- <div class="Row"  -->
         </div>
         <!--  id="container"  -->
         <!-- ============NewRow============== -->
         <div id="Row3">
            <div id="Row3Cell1">
               <br>
               <button onclick="createLeftNote()">Add Left Note</button>
               <button onclick="createArticleHeading()">Add Heading</button>
               <button onclick="createTextArea()">Add Text Paragraph</button>
               <button onclick="createRightNote()">Add Right Note</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" > </p>
            </div>  <!-- id="Row3Cell1"  -->
         </div>  <!-- <div class="Row"  -->
      </div>  <!--  <div class="Table">  -->
      <script>
         var  LeftNote = "LeftNote";
         var  ArticleHeading = "Heading";
         var  TextParagraph = "Text";
         var  RightNote = "RightNote";
         var  ButtonParagraph = "New Link";
         var  document_URL;
         var  filename = "myStory.html";
         var allHtml =  document.documentElement.outerHTML; 
         var  document_URL;
         function documentURL() {
         document_URL = document.URL;
         document.getElementById("currentPage_Address").innerHTML = document_URL;  
         window.addEventListener("keydown", onPress_ENTER, false);

         }
      </script>
      <script>
      function onPress_ENTER(event){
        var keyPressed = event.keyCode || event.which;
        //if ENTER is pressed
        if(keyPressed==13)
        {
//            alert('enter pressed');
            event.preventDefault();
            stopImmediatePropagation();
        }
        else
        {
            return false;
        }
} 
      </script>
      <script contenteditable="">
         function createTextArea() {
                   var p_tgh = document.createElement("p");
                   p_tgh.innerHTML = TextParagraph;
                   p_tgh.setAttribute("contenteditable", "true");
                   p_tgh.setAttribute("class","p_tgh");
                   var content = document.getElementById("Row2Cell2");
                   content.appendChild(p_tgh);
                 }	
      </script>	
      <script contenteditable="">
         function createArticleHeading() {
           var p_ah = document.createElement('p');
           p_ah.innerHTML = ArticleHeading;
           p_ah.setAttribute('contenteditable', 'true');
           p_ah.setAttribute("class","p_ah");
           var content = document.getElementById('Row2Cell2');
           content.appendChild(p_ah);
         }
      </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>

Thanks

Edited February 15, 2019 by vmars316

dsonesuk · February 16, 2019

Actually it does work html, body, and the table wrapper, if you give the wrapper background color red it goes down to bottom of screen, if you talking about the other elements that a different matter altogether. The title says body tag only, that html and wrapper were not mentioned, As i mentioned you could use the vh unit for each row of elements to fill the whole browser window for quick fix.

vmars316 · February 16, 2019

Thanks,

         .Table {/*  wrapper  */
         min-height:100%;
         text-align: center;    
         margin: 0 auto;
         padding:0;
         background: #FF0000  ;
         }

Hmm...

Sorry , I have to ask , did you test my whole code ?

I am confused .

On Chrome what it does is make a red line at the bottom , just below id="Row3Cell1" .

And the rest of the page is blank .

I want to fill up the whole visible screen .

You are saying I can use vh to fill up the whole visible page ?

Thanks

dsonesuk · February 16, 2019

https://www.w3schools.com/code/tryit.asp?filename=G19MDT6C3HPE

It does exactly what i said it would do, so i don't know what you are doing for it to do that?

vmars316 · February 16, 2019

https://www.w3schools.com/code/tryit.asp?filename=G19MDT6C3HPE

Thank you for doing that !

Now we are getting somewhere , I think .

Note image below: This is what I see from same html .

Perhaps it has something to do with you are connected with a Server , I am not .

In debugging , I find that :

If I copy my code from the 'w3schools link' you gave me , I get my same results , not yours .

However ,

If while at your 'w3schools link' , I click 'RUN'

and then click [Add Text] a couple times ,

Then click [Save This Page] , and let it download to my computer .

Then it does show exactly as yours does .

How can we account for that ??

Thanks

dsonesuk · February 16, 2019

What editor are you using?

vmars316 · February 16, 2019

Notepad++

vmars316 · February 18, 2019

Please let me know if you find out why it acts that way .

Thanks

Funce · February 18, 2019

What Browser are you using?

Only thing I could think of is caching. Try a hard refresh ([CTRL] + [F5]) to see if you're just using an old stylesheet.
Otherwise could clear your browsing data - 'cached images and files'

vmars316 · February 18, 2019

Thanks

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

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in