Elemente kollabieren, wenn ich ihre Höhe zu Prozentwerten ändere

Ich arbeite an meinem zweiten Projekt für das Web (Autodidakt) und ich habe eine neue Frage.Elemente kollabieren, wenn ich ihre Höhe zu Prozentwerten ändere

Ich habe eine Kopf- und Fußzeile in meiner Seite, die beide eine Höhe von 100px haben. Ich versuche das zu ändern, so dass die Höhe in Prozent ist, aber wenn ich das mache, kollabieren sie. Warum?

Code:

HTML

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Photography</title> 
     <link rel="stylesheet" type="text/css" href="styles.css"> 
     <script type="text/javascript" src="jquery-3.1.0.min.js"></script> 
     <script type="text/javascript" src="JavaScript2b.js"></script> 
     <script type="text/javascript" src="JavaScript2.js"></script> 
    </head> 

    <body> 
     <div id="header"> 
     </div> 
     <div id="wrap"> 
      <div id="container"> 
       <div id="controllers"> 
        <div id="previous" class="buttons" onclick="change(-1);"> 
        </div> 
        <div id="next" class="buttons" onclick="change(1);"> 
        </div> 
       </div> 
       <div id="imagewrap"> 
        <img src="Images/01PARANA/Image1.jpg" height="100%" id="front" /> 
       </div> 
       <div> 
        <p id="tag">Poem</p> 
       </div> 
      </div> 
     </div> 
     <div id="footer"> 
     </div> 
    </body> 
    <script type="text/javascript" src="JavaScript2.js"></script> 
</html>

CSS

@font-face {font-family: Eagle-Light; 
        src: url("Eagle-Light.otf") format("opentype"); 
        } 

@font-face {font-family: Raleway Light; 
        src: url("Raleway Light.otf") format("opentype"); 
        } 

body { 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
} 

#header { 
    position: relative; 
    height: 100px; 
    width: 100%; 
    background-color: yellow; 
} 

#wrap { 
    position: relative; 
    clear: both; 
    padding: 0px; 
    width: 100%; 
} 

#footer { 
    position: relative; 
    height: 100px; 
    width: 100%; 
    background-color: lightgray; 
    display: block; 
} 

#container { 
    position: relative; 
    margin: 15px auto; 
} 

#controllers { 
    position: static; 
    height: 20px; 
} 

#previous { 
    position: absolute; 
    left: 10px; 
    background-image: url(Images/carremoins.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    width: 20px; 
    height: 20px; 
    z-index: 4; 

} 

#next { 
    background-image: url(Images/carreplus.png); 
    background-repeat: no-repeat; 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    right: 10px; 
    z-index: 4; 
    background-position: center center; 
} 

#container:hover .buttons { 
/* display: block;*/ 
opacity: 1; 
} 

#tag { 
    position: relative; 
    height: 40px; 
    line-height: 1.7em; 
    padding-top: 5px; 
    text-align: center; 
    font-size: 1.1em; 
} 


.buttons { 
    cursor: pointer; 
    top: 50%; 
    z-index: 3; 
/* display: none;*/ 
    opacity: 0; 
    transition: opacity .3s ease-in-out; 
} 


#imagewrap{ 
    position: relative; 
    border: 1px solid #818181; 
    overflow: hidden; 
    z-index: 2; 
    height: 100vh; 
} 

#front { 
    display: block; 
} 

p { 
    color: #818181; 
    font-family: Eagle-Light; 
    line-height: 1.7em; 
    padding: 0px; 
    margin: 0px; 
    font-size: 0.5em; 
    letter-spacing: 0.21em; 
} 


a:link { 
    text-decoration: none; 
    color: inherit; 
} 

a:visited { 
    text-decoration: none; 
    color: inherit; 
}

Quelle

2017-02-22 Paul

Sie können VH verwenden, um Höhe in Prozenten einzustellen. – Andrew

http://stackoverflow.com/a/31728799/3597276 Lesen Sie dies, ich denke, es wird helfen. – Andrew

Ok, also muss ich die Höhe des Containers speziell einstellen. Aber was, wenn ich möchte, dass der Container die Höhe des Fensters ausfüllt (egal wie groß oder klein das Fenster sein mag) UND die Fußzeile immer 10% dieser Höhe sagen soll. Ist es möglich, dies zu tun? – Paul

Für den Behälter mit der Höhe des Bildschirms zu füllen, können Sie dies versuchen:

html, body { 
    height: 100%; 
}

Quelle

2017-02-22 10:56:16 Swellar

Ich habe das versucht, aber ich bekomme immer noch Bildlaufleisten. Was ist der einfachste Weg, um den Körper die gesamte Höhe unabhängig von Inhalt zu füllen? – Paul

Wenn Sie Bildlaufleisten erhalten, hat etwas einen Rand. Ränder addieren sich zur Gesamthöhe. Lösung: Legen Sie 'margin: 0' fest, oder verwenden Sie' calc (100% - 16px) '' für die Höhe (unter der Annahme, dass der obere und untere Rand jeweils 8px beträgt). –

bitte versuche das zu tun:

#footer { 
height: 10vh; 
}

10vh = 10% der Höhe des Ansichtsfenster

neben der den Prozentsatz direkt einstellen, können Sie auch tun Berechnungen, wie die Höhe der Fußzeile machen gleich der Höhe des Ansichtsfensters minus 800px, indem Sie dies:

#footer { 
height: calc(100vh - 800px); 
}

Quelle

2017-02-22 10:57:56

Elemente kollabieren, wenn ich ihre Höhe zu Prozentwerten ändere

Antwort

Verwandte Themen