2017-08-09 2 views
0

Ich verwende Bootstrap, um eine Website zu erstellen, aber Probleme mit der Fußzeile.Bootstrap Footer sitzt korrekt, wenn auf dem Desktop, bewegt sich aber über Inhalt auf Handy

Fußzeile sollte unter Inhalt sitzen. Nicht klebrig - es sollte gescrollt werden. Auf dem Desktop ist es in Ordnung, aber auf einem mobilen Gerät (oder schmalen Ansichtsfenster) wird es über den Hauptinhalt gehen.

einfache HTML-Struktur

<body> 
    <nav></nav> 
    <main> 
    <row> 
     <div></div> 
     <div></div> 
    </row> 
    <row> 
     <div class="container-fluid col-sm-6"></div> 
     <div class="container-fluid col-sm-6"></div> 
    </row> 
    </main> 
    <row></row> 
    <footer></footer> 
</body> 

relevant css

main { 
    height:97%; 
    position: relative; 
    font-family: 'Advent Pro', sans-serif; 
} 

footer { 
    background-color: #5fc3eb; 
    color: #ffffff; 
    padding: 2em; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    clear: both; 
    height: 5em; 
    position: relative; 
} 

Sie können an amiec.com.au um die lästigen Stelle graben.

Antwort

0

Entfernen/Kommentieren der HTML "Höhe: 97%" wird den Trick machen. In Ihrem CSS, Höhe gilt auch für HTML-Tag sowie

+0

perfekt, danke :) – Jax

+0

Glücklich zu helfen, und willkommen zu Stack Overflow. Wenn diese Antwort oder eine andere Lösung Ihr Problem gelöst hat, markieren Sie es als akzeptiert. Danke :) – umer

0

dass finden,

enter image description here

Wie pro Ihren Code, setzen display: block;-display: inline-block; ..

Hinweis: Denken Sie daran, eine Sache, ich sage Ihnen CSS Bootstrap Standardeinstellung zu ändern, nur weil Sie diesen Code so schreiben ..

Verwandte Themen