0
Ich bin neu in CSS und habe einige Probleme mit meiner Fußzeile. Ich habe wirklich versucht, eine Antwort zu finden, aber nichts scheint zu funktionieren.Wie man die Fußzeile auf den Boden klebt und einen Mindestabstand zum anderen Inhalt hält
Ich muss die Fußzeile ganz unten auf der Seite haben, aber in der gleichen Zeit einen Mindestabstand zu den anderen Inhalt von 150px haben.
Bis jetzt habe ich es geschafft, die Fußzeile ganz unten zu bekommen, aber ich kann nicht den Mindestabstand zur Arbeit bekommen.
<body>
<div class="wrapper">
<div class="header">
<div class="banner">
<h1></h1>
</div>
<div class="navbar">
<ul>
<li><a id="home" class="active" href="home.html">Hjem</a></li>
<li><a id="billeder" href="billeder.html">Billeder</a></li>
<li><a id="video" href="video.html">Video</a></li>
<li><a id="kontakt" href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</div>
<div class="bodybill">
<div class="content">
<p class="welcome">Some text.</p>
</div>
\t \t
\t \t <div class="leftpic">
\t \t </div>
\t \t
\t \t <div class="rightpic">
\t \t </div>
</div>
<div class="footer">
<footer>Some text</footer>
</div>
</div> \t
</body>html,body {
background-image: url("image.png");
height: 100%;
\t margin: 0;
\t padding: 0;
\t top: 0;
}
div.wrapper {
min-height: 100%;
min-width: 100%;
position: relative;
width:100%;
\t margin-top: 0px;
\t padding-top: 0px;
margin-left: auto;
margin-right: auto;
}
div.header {
padding: 0px;
\t top: 0px;
}
div.bodybill {
padding:0px;
\t height: 600px;
padding-bottom: 100px;
}
div.footer {
position: absolute;
width: 100%;
height: 100px;
background: black;
border-style: solid;
border-width: 1px 0px 1px 0px;
border-color: #141953;
background-image: url("image.png");
bottom: 0;
}
footer {
\t margin-left: 20px;
\t margin-top: 30px;
color: white;
font-size: 14px;
Das ist es dank tat, aber Was habe ich getan? – BrianV
Wir haben den Inhalt des Körpers in eine Hülle gehüllt und haben ihm eine Mindesthöhe gegeben, so dass selbst wenn die Höhe des Inhalts geringer ist als die Höhe, die wir angegeben haben, gibt er die Höhe, die wir definiert haben. 100vh ist wie 100% Viewport Höhe. Wir sagen dem Browser, dass er den .wrap 100% in View-Port füllen soll. und wir haben das calc (100vh - 150px) verwendet; liegt daran, dass Ihre Fußzeile unter dem Viewport liegt, wenn Ihr Wert 100vh beträgt. Da deine Fußzeile 150px Höhe hatte. Wir sagten 100vh - 150px, so dass die Fußzeile auftaucht und darunter klebt. Hoffe, ich erklärte dir gut, verzeih mir, wenn ich dich verwirrt und schlecht erklären: P – NewbieDeveloper
Nein, es machte Sinn :) Aber wenn ich zu einem anderen Monitor mit höherer Auflösung gehe, ist die Fußzeile nicht 100% unten, ist da Irgendeine Möglichkeit, das auszugleichen, vielleicht mit% anstelle von px? – BrianV