# Height: 100%; on Chrome not working

**URL:** <https://forum.freecodecamp.org/t/height-100-on-chrome-not-working/338587>\
**Category:** General\
**Created:** [January 5, 2020, 3:13pm UTC](https://forum.freecodecamp.org/t/height-100-on-chrome-not-working/338587 "2020-01-05T15:13:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![bbwd345](https://avatars.discourse-cdn.com/v4/letter/b/5fc32e/32.png) [@bbwd345](https://forum.freecodecamp.org/u/bbwd345)\
**Post date:** [January 5, 2020, 3:13pm UTC](https://forum.freecodecamp.org/t/height-100-on-chrome-not-working/338587/1 "2020-01-05T15:13:45Z")

</div>

hi, sorry for my English…

How have my Media Query for Desktop.

```auto
@media (min-width: 64.0625em) and (max-width: 80em) {
  
   body {
       display: grid;
       display: -ms-grid; 
       background-color: #eaf6e5;
       grid-row-gap: 0.3125rem;
       grid-template:
        "header header header" auto
        "nav nav nav" auto
        "main main werb" 19rem
        "main main info" 1fr
        "footer footer footer" auto / 8% 64% 28%;
       
       -ms-grid-columns: 8% 64% 28%;
       -ms-grid-row: 7.5rem 5rem 6.4375rem; 
       -ms-grid-gap: 0.3125rem;
    
    }
    body > main {
      grid-area: main;  
     
       box-sizing: border-box; /* margin wo der test anfang */  
       padding: 0.4375rem; /* margin wo der test anfang , padding für den margin */ 
       height: 100%; 
      
    }
    body > aside {
        
        grid-area: info;
        display: block;
        display: -ms-grid;
        -ms-grid-column: 3;
        -ms-grid-row: 3;
        margin: 0.0625rem;
        background-color: #d2f3c6;
        
        margin-left: 8.125rem;
    }

    
    

   
    
    
    
    nav a {
      color: black;
      text-decoration: none;
	  display: inline-block;
	  padding: 0.625rem 0.5rem 0.625rem;
	  font-size: 1.25rem;
	  font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
    }
    
    .dropdown-content a {
       font-size: 0.9375rem;
       padding: 0.75rem 1.05rem;
       
    }
    
    
    .languag:hover .languages, .languag:focus-within .languag {top: 2.4375rem;}
    .dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content {top: 2.4375rem; }
    .new-link:hover .new-content, .new-link:focus-within .new-link { top: 2.4375rem;}
    
    .languages a {padding: 0.75rem 2.0625rem;} 
    .new-content a { padding: 0.75rem 2.9375rem; }
     
    .dropdown-content a { -webkit-padding-start: 1rem; } 
    .new-content a { -webkit-padding-start: 2.8125rem;}
    .languages a {-webkit-padding-start: 2rem;}
    
    .seste {display: none;}
    .siebte{display: none; }
    .erste-unten {display: none; }
    .ipad-lange {display: none; }
    
    img { float: left; margin-right: 0.3125rem;} 

    .a {background-color: #f0f8ec;} 

 
         /* link wechsel */

    .link_change ul { list-style-type: none; }
    .link_change li { display: inline; }
    .link_change a {

       display: inline;
       text-decoration: none;
       border: 0.0625rem solid gray;
       background-color: green;
       color: black;
       padding: 0.5rem;
       opacity: 0.5rem;
       font-family: Times New Roman;
    }

    .link_change a:hover { background-color: #9f9e9e; }
    .link_change a[aria-current=page] { background-color: #66ff66;}

    #pages {

       list-style-type: none;
       margin-right: 0.625rem;
       background-color: #ccffcc;
       border-style: solid;
       border-width: 0.0625rem;
       padding: 0.5rem;
    }
    
}    

header {
    
    grid-area: header;
    background-image: url('Photo/view.webp');
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 8.75rem;
    
    -ms-grid-column: 1/3;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1;

    
}

nav {
	grid-area: nav;
	-ms-grid-column: 1/3;
    -ms-grid-column-span: 3;Quelltext hier
    -ms-grid-row: 2;

   background-color: #d2f5c4;
   margin: 0.0625rem;
  

}

main {
    
    grid-area: main;
    display: block; 
    -ms-grid-column: 1/2;
    -ms-grid-column-span: 2; 
    -ms-grid-row: 3;
   
    background-color: #e1f2d9;
    margin: 0.125rem;
    margin-right: 0.125rem;
    margin-left: 1.4rem;
    
   
   
} 

/* linke werbung */

 .drei {
    
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 10rem;
  height: 37.5rem;
  margin-top: 1.5625rem;
  margin-left: 1.875rem;
  

}

/* Erste werbung */

.erste {
    
    display: inline;
    width: 45.5rem;
    height: 5.625rem;
    margin-left: 1.25rem;
    
}

footer {
    grid-area: footer;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 6;
    -ms-grid-row-span: 6;
    
    background-color: #99ee7a;

}

```

My **main** Element have,

```auto
  body > main {
      grid-area: main;  
     
       box-sizing: border-box; /* margin wo der test anfang */  
       padding: 0.4375rem; /* margin wo der test anfang , padding für den margin */ 
       height: 100%; 
      
    }

```

My problem…

The bottom on Firefox come gut, how to show it,

 ![firefox](https://global.discourse-cdn.com/freecodecamp/original/3X/1/5/15f6d08a47d888f8e46e000d52525daa329d9414.png)

The bottom on chrome to come blank space, how to show it,

 ![chrome](https://global.discourse-cdn.com/freecodecamp/original/3X/b/5/b5792a0d7fe758cc896e05c33c0877419105c9f1.png)

I to search for a solution on **stackoverflow** but not a working for me…

Can Please anyone help me for this problem, Thanks!

---

<div class="post-metadata">

**Author:** ![bbwd345](https://avatars.discourse-cdn.com/v4/letter/b/5fc32e/32.png) [@bbwd345](https://forum.freecodecamp.org/u/bbwd345)\
**Post date:** [January 5, 2020, 4:33pm UTC](https://forum.freecodecamp.org/t/height-100-on-chrome-not-working/338587/2 "2020-01-05T16:33:50Z")

</div>

I found a solution to my problem…

I to search for a solution anywhere, what not working for me…, the found a solution with a trick… on my **Grid-layout** add a new container without value,

```auto
"main main gap1" auto

```

How have now my **body-Element** ,

```auto
body {
       display: grid;
       display: -ms-grid; 
       background-color: #eaf6e5;
       grid-row-gap: 0.3125rem;
       grid-template:
        "header header header" auto
        "nav nav nav" auto
        "main main werb" 16rem
        "main main gap1" auto
        "main main info" 1fr
        "footer footer footer" auto / 8% 64% 28%;
       
       -ms-grid-columns: 8% 64% 28%;
       -ms-grid-row: 7.5rem 5rem 6.4375rem; 
       -ms-grid-gap: 0.3125rem;
    
    }

```

and the problem from blank space on Chrome is disappear …

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 7:38pm UTC](https://forum.freecodecamp.org/t/height-100-on-chrome-not-working/338587/3 "2021-06-01T19:38:28Z")

</div>