Wie Sie einen Fuß nach unten halten

Ich kann nicht die Fußzeile am Ende der Seite für Desktop-und mobile halten. Kann jemand bitte meinen Code durchgehen und mir sagen, wie ich ihn beheben kann?Wie Sie einen Fuß nach unten halten

Das Problem ist, dass es zurück in die Mitte der Seite geht und ich kann es nicht nach unten verschieben und es bleibt dort für die meisten Browser und Geräte.

Ich habe mich nach Korrekturen umgeschaut und es gibt ein paar, aber die, die ich versucht habe, ruinieren einfach die ganze Seite und schieben alles aus der Ausrichtung. Ich bin auf der Suche nach der kleinsten Menge an Code, um dies zu tun, ich möchte nicht einen riesigen Stück Code dafür. Ich möchte es einfach halten. Ich bin neu in der Webentwicklung. Dies ist meine erste Website.

Dies ist der Index.

Hier ist mein Code:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"> 
 
    <title>THG Graphics</title> 
 
    <script src="js/jquery-3.2.1.min.js"></script> 
 
</head> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<style> 
 
    body, 
 
    h1 { 
 
    font-family: "Raleway", Arial, sans-serif 
 
    } 
 
    
 
    h1 { 
 
    letter-spacing: 6px 
 
    } 
 
    
 
    .w3-row-padding img { 
 
    margin-bottom: 12px 
 
    } 
 
    
 
    .dropdownmobile { 
 
    height: 100%; 
 
    width: 100%; 
 
    } 
 
    
 
    .border { 
 
    width: 24.%; 
 
    border: 1px solid #c3c3c3; 
 
    display: inline-block 
 
    } 
 
    
 
    .dropbtn { 
 
    background-color: #FFFFFF; 
 
    color: black; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: thin; 
 
    cursor: pointer; 
 
    } 
 
    
 
    .dropbtn:hover, 
 
    .dropbtn:focus { 
 
    background-color: #ffffff; 
 
    } 
 
    
 
    .dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 
    
 
    .dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f6f6f6; 
 
    min-width: 230px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
    } 
 
    
 
    .dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    } 
 
    
 
    .dropdown a:hover { 
 
    background-color: #989898 
 
    } 
 
</style> 
 

 
<body> 
 

 
    <!-- !PAGE CONTENT! --> 
 
    <div class="w3-content" style="max-width:1500px"> 
 

 
    <!-- Header --> 
 
    <header class="w3-panel w3-center w3-opacity" style="padding:32px 16px"> 
 
     <h1>THG Graphics</h1> 
 
     <h1 class="w3-xlarge">Graphic Designer</h1> 
 
     <div class="w3-padding-32"> 
 
     <div class="border"> 
 
      <a title="Home" href="index.html" class="w3-button w3-grey dropbtn">Home</a> 
 
      <a title="Portfolio" href="portfolio.html" class="w3-button dropbtn">Portfolio</a> 
 
      <a title="Enquiry" href="Enquiry.html" alt="Enquiry" class="w3-button dropbtn">Enquiry</a> 
 
      <div class="dropdown"> 
 
      <button title="About" alt="About" class="w3-button dropdown dropbtn dropdownmobile">About</button> 
 
      <div class="dropdown-content" id="myDropdown"> 
 
       <a title="Contact us" href="Contact.html" alt="Contact us" class="w3-button">Contact us</a> 
 
       <a title="Terms of use" href="TOS.html" alt="Terms of use" class="w3-button">Terms of use</a> 
 
       <a href="#" title="Privacy policy" href="Privacypolicy.html" alt="Privacy Policy" class=" w3-button">Privacy Policy</a> 
 
       <a title="FAQ" href="FAQ.html" alt="FAQ" class=" w3-button">FAQ</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <h2>Welcome to THG Graphics!</h2> 
 
     <h5>We make custom Logos, Animated Logos &amp; Animations to suit your needs.</h5> 
 
     <h5>Please check out our portfolio to view some of our work.</h5> 
 
     </div> 
 
    </header> 
 
    </div> 
 
    <footer class="w3-container w3-padding-16 w3-light-grey w3-center footer"> 
 
    <p class="fl_left">Copyright &copy; 2017 - All Rights Reserved - THG-Graphics.com</p> 
 
    <div> 
 
     <a href="TOS.html" class="w3-hover-text-blue">Terms of use</a> 
 
     <a href="Privacypolicy.html" class="w3-hover-text-blue">Privacy Policy</a> 
 
     <a href="FAQ.html" class="w3-hover-text-blue">FAQ</a> 
 
    </div> 
 
    <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</a></p> 
 
    </footer> 
 
</body> 
 

 
</html>

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"> 
 
    <title>THG Graphics</title> 
 
    <script src="js/jquery-3.2.1.min.js"></script> 
 
</head> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<style> 
 
    body, 
 
    h1 { 
 
    font-family: "Raleway", Arial, sans-serif 
 
    } 
 
    
 
    h1 { 
 
    letter-spacing: 6px 
 
    } 
 
    
 
    .w3-row-padding img { 
 
    margin-bottom: 12px 
 
    } 
 
    
 
    .dropdownmobile { 
 
    height: 100%; 
 
    width: 100%; 
 
    } 
 
    
 
    .border { 
 
    width: 24.%; 
 
    border: 1px solid #c3c3c3; 
 
    display: inline-block 
 
    } 
 
    
 
    .dropbtn { 
 
    background-color: #FFFFFF; 
 
    color: black; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: thin; 
 
    cursor: pointer; 
 
    } 
 
    
 
    .dropbtn:hover, 
 
    .dropbtn:focus { 
 
    background-color: #ffffff; 
 
    } 
 
    
 
    .dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 
    
 
    .dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f6f6f6; 
 
    min-width: 230px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
    } 
 
    
 
    .dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    } 
 
    
 
    .dropdown a:hover { 
 
    background-color: #989898 
 
    } 
 
</style> 
 

 
<body> 
 

 
    <!-- !PAGE CONTENT! --> 
 
    <div class="w3-content" style="max-width:1500px"> 
 

 
    <!-- Header --> 
 
    <header class="w3-panel w3-center w3-opacity" style="padding:32px 16px"> 
 
     <h1>THG Graphics</h1> 
 
     <h1 class="w3-xlarge">Graphic Designer</h1> 
 
     <div class="w3-padding-32"> 
 
     <div class="border"> 
 
      <a title="Home" href="index.html" class="w3-button w3-grey dropbtn">Home</a> 
 
      <a title="Portfolio" href="portfolio.html" class="w3-button dropbtn">Portfolio</a> 
 
      <a title="Enquiry" href="Enquiry.html" alt="Enquiry" class="w3-button dropbtn">Enquiry</a> 
 
      <div class="dropdown"> 
 
      <button title="About" alt="About" class="w3-button dropdown dropbtn dropdownmobile">About</button> 
 
      <div class="dropdown-content" id="myDropdown"> 
 
       <a title="Contact us" href="Contact.html" alt="Contact us" class="w3-button">Contact us</a> 
 
       <a title="Terms of use" href="TOS.html" alt="Terms of use" class="w3-button">Terms of use</a> 
 
       <a href="#" title="Privacy policy" href="Privacypolicy.html" alt="Privacy Policy" class=" w3-button">Privacy Policy</a> 
 
       <a title="FAQ" href="FAQ.html" alt="FAQ" class=" w3-button">FAQ</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <h2>Welcome to THG Graphics!</h2> 
 
     <h5>We make custom Logos, Animated Logos &amp; Animations to suit your needs.</h5> 
 
     <h5>Please check out our portfolio to view some of our work.</h5> 
 
     </div> 
 
    </header> 
 
    </div> 
 
    <footer class="w3-container w3-padding-16 w3-light-grey w3-center footer"> 
 
    <p class="fl_left">Copyright &copy; 2017 - All Rights Reserved - THG-Graphics.com</p> 
 
    <div> 
 
     <a href="TOS.html" class="w3-hover-text-blue">Terms of use</a> 
 
     <a href="Privacypolicy.html" class="w3-hover-text-blue">Privacy Policy</a> 
 
     <a href="FAQ.html" class="w3-hover-text-blue">FAQ</a> 
 
    </div> 
 
    <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</a></p> 
 
    </footer> 
 
</body> 
 

 
</html>

Quelle

2017-09-16 Sean

ein bisschen das Problem zu vereinfachen, sagen Sie Ihren sieht HTML-Code wie folgt aus:

<div id="wrapper"> 
    <div class="header">HEADER</div> 
    <div class="container">CONTENT</div> 
    <div class="footer">FOOTER</div> 
</div>

Nun, das ist, wie der Code CSS aussehen könnte:

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

#wrapper { 
    min-height: 100%; 
    width: 100%; 
    position: relative; 
} 

.header { 
    background: blue; 
} 

.container { 
    background: red; 
    padding-bottom: 100px; 
} 

.footer { 
    bottom: 0; 
    width: 100%; 
    height: 100px; 
    position: absolute; 
    background: yellow; 
}

Beachten Sie, dass eine untere Polsterung von genau der Höhe der Fußzeile (100px hier), um Ihre Container hinzufügen müssen, damit es funktioniert.

Die Magie tritt auf, weil Sie die Mindesthöhe Ihres Wrappers auf 100% setzen, wodurch Ihr Div auf die Höhe des Viewports gebracht wird.

Und Ihre Fußzeile wird am Ende der Seite, egal was.

Hoffe, das hilft!

Quelle

2017-09-16 04:06:19 Alex

Das ist nicht für mich arbeiten und ist auch sehr kompliziert, weil id die gesamte Seite im Grunde ein Remake benötigen. Ich bin mir sicher, ich könnte dies mit 2 Zeilen CSS tun, aber jedes Mal, wenn ich es für den Desktop repariere, bricht es auf dem Handy. Also, wenn ich es auf Handy repariere, bricht es es auf dem Desktop. Sogar die Fußzeile um mein Javascript herum zu bewegen, kann es brechen. Es ist seltsam. – Sean

Hmm ok Ich werde versuchen, so schnell wie möglich mit deinem Code zu überprüfen, aber ich kann gerade nicht auf meinen Computer zugreifen. Haben Sie versucht, mit der Mindesthöhe Ihres Containers zu spielen? :) – Alex

G'day Alex, ich habe meine gesamte Website mit dem, was Sie oben verlinkt und meine Problem behoben. Ich habe eine Menge Probleme bekommen, wie immer alles jetzt funktioniert. Meine Fußzeile ist jetzt dynamisch auf die Bildschirmgröße. Danke für Ihre Hilfe. Sehr geschätzt. – Sean

Versuchen Sie, diese

.footer {position: absolute; bottom: 0; width: 100%;}

Quelle

2017-09-16 04:32:41 noddy

Wo soll ich diese Linie hinstellen? Ersetzen Sie meine Footer-Klassen durch diese Zeile? – Sean

Ah Ich sehe, dass Sie das W3 CSS-Stylesheet verwenden. Entschuldigung, ich dachte, du hättest all dein CSS von Hand geschrieben. Sie können also diese Codezeile nach ".dropdown a: hover {background-color: # 989898}" und vor dem Tag "" kopieren und einfügen und die Fußzeile sollte unten bleiben.Lass es mich wissen, wenn es nicht funktioniert! – noddy

Übrigens ist die Lösung, die ich Ihnen gegeben habe, ein Pflaster-Fix. Sie werden wahrscheinlich ein Problem mit Inhalten feststellen, die sich hinter der Fußzeile verbergen, wenn Sie den Bildschirm in der Zukunft verkleinern. Wenn Sie CSS richtig lernen wollen, schlage ich vor, die w3-Vorlage nicht zu verwenden, da ihr Code möglicherweise unkonventionelle Interaktionen mit Ihren eigenen hat (so wie die Fußzeile nicht unten bleibt) und Ihren eigenen benutzerdefinierten Code schreibt. Wenn Sie Probleme mit dem Start haben, weiß ich, wenn ich helfen kann:) – noddy

Wie Sie einen Fuß nach unten halten

Antwort

Verwandte Themen