Wie wird die Höhe an den Bildschirm angepasst?

Question

Ich versuche, diese responsive Webseite auf die Browser-Höhe (kein vertikales Scrollen) anzupassen und ich bin verwirrt. Alle Arbeit und kein Spiel macht Jack ein dumpfer Junge. Alle Arbeit und kein Spiel macht Jack zu einem langweiligen Jungen. Alle Arbeit und kein Spiel macht Jack zu einem langweiligen Jungen. Alle Arbeit und kein Spiel macht Jack zu einem langweiligen Jungen.

HTML:

<header class="mainHeader"> 
    <a href="/home/show"> 
    <img src="/assets/EagleLogo.png" alt="" /> 
    </a> 
    <nav> 
     <ul> 
     <li><a href="/products/supertherm" class="hvr-underline-from-center">SuperTHERM<sup>®</sup></a></li> 
     <li><a href="/products/rustgrip" class="hvr-underline-from-center">RustGRIP<sup>®</sup></a></li> 
     <li><a href="/products/hotpipe" class="hvr-underline-from-center">Hot-PIPE<sup>®</sup></a></li> 
     </ul> 
     <div class="search"><a href="#"><img src="/assets/mg.png" alt="" /></a> 
     </div> 
     <div class="product-inventory"><a href="/products/index"><img src="/assets/inventory.png" alt="" /></a> 
     </div> 
    </nav> 
    </header> 

<hr> 

    <div class="mainContent-container"> 
    <img class="thermal" src="/assets/thermal.png" alt="" /> 
    <img class="corrosion effect2"src="/assets/co.png" alt=""/> 
    <img class="fire effect2"src="/assets/fire.png" alt="" /> 
     <p class="intro"></p> 
    </div> 

    <img src="/assets/phone.png" alt="" height="75px" width="75px" align="middle" /> 

    <footer class="mainFooter"> </footer> 

CSS:

.mainHeader img { 
width: 30%; 
height: auto; 
} 

.mainHeader nav { 
height: 40px; 
margin-top: -4%; 
text-align: center; 
} 

div.mainContent-container { 
// width: 80%; 
margin: 3% 10% -3% 10%; 
position: relative; 
list-style: none; 

.intro { 
padding: .1% 1% 0 1%; 
margin-top: 1%; 
width: 95%; 
text-align: center; 
font-size: 1.5em; 
font-family: 'Raleway'; 
font-weight: 500; 
} 

img[src="/assets/phone.png"] { 
margin: 3.5% 46.9% 4% 46.9%; 
} 

.mainFooter { 
margin: 0 0 5% 28.3%; 
} 

Answer 1

Alle Arbeit und kein Spiel macht Jack einen stumpfen Jungen. Alle Arbeit und kein Spiel macht Jack zu einem langweiligen Jungen. Alle Arbeit und kein Spiel macht Jack zu einem langweiligen Jungen. Alle Arbeit und kein Spiel macht Jack zu einem langweiligen Jungen.

Das muss der extrem verwirrendste Spruch sein, den ich je gelesen habe.

Wie für Ihre Frage wurde es viele, viele Male zuvor beantwortet.

Darüber hinaus ist es möglicherweise nicht sehr reaktionsfähig, um alles in der Höhe anzupassen, stattdessen sollten Sie sich auf die Breite konzentrieren.

Nehmen Sie zum Beispiel ein Telefon, das horizontal gedreht ist, würde es das Design viel zu sehr zerquetschen.

Wenn Sie darauf bestehen ..

html,body{height:100%;margin:0 0;padding:0 0;}