Jump to content

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


Recommended Posts

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 .

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

 

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

 

Link to post
Share on other sites

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 by vmars316
Link to post
Share on other sites

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.

Link to post
Share on other sites

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

 

Link to post
Share on other sites

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 

 

MyStory-Heading-FromW3C-Shrink-300x139.png

Link to post
Share on other sites

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'

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...