hi, sorry for my English…
How have my Media Query for Desktop.
@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,
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,
The bottom on chrome to come blank space, how to show it,
I to search for a solution on stackoverflow but not a working for me…
Can Please anyone help me for this problem, Thanks!