2017-06-01 6 views
0

Ich habe eine Fußzeile in meiner Website, und ich habe etwas Text in dieser Fußzeile, die ich unten rechts auf der Seite ausrichten möchte.Körper erstreckt sich nicht bis zum Ende der Seite?

Die Fußzeile sieht wie folgt aus:

<div class="container-fluid"> 
     <div class="row copyright-container col-md-10 col-md-offset-1"> 
     <div class="copyright"> 
      <p>&copy; Some Copyright Stuff 2011 - 2020</p> 
     </div> 
    </div> 

Meine SCSS sieht aus wie dieses

.copyright { 
     bottom: 0; 
     right:0; 
    } 

Ich will nur das, was am unteren Ende rechts auszurichten. Es tut so, aber mein Körper scheint nicht bis zum Ende der Seite zu reichen, aber ich weiß nicht warum.

Ich habe versucht, meinem Körper eine Höhe von 100% zu geben, aber das hat auch nicht geholfen (<body style="height:100%;">). Ich habe das gleiche für mein HTML versucht.

Mein Ausschnitt sieht so aus. Wie Sie sehen können, funktioniert alles, aber auf meinem Computer endet der Körper gerade bei 2/3 der Seite. Warum könnte das sein?

.copyright { 
 
     position: absolute; 
 
     bottom: 0; 
 
     right:0; 
 
} 
 
    
 
.bg { 
 
background-color: black; 
 
} 
 
    
 
<html> 
 
<body> 
 

 
<div class="container-fluid"> 
 
    <div class="row copyright-container col-md-10 col-md-offset-1"> 
 
     <div class="copyright"> 
 
     <p> Some Copyright 2011 - 2020</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 
</html>

+0

Fragen Code Hilfe suchen müssen den kürzesten Code enthalten notwendig, es zu reproduzieren ** in der Frage selbst ** vorzugsweise in einem [** Stapel Snippet **] (https: // blog .stackoverflow.com/2014/09/Einführung-Runnable-Javascript-CSS-und-HTML-Code-Snippets /). Siehe [** So erstellen Sie ein minimales, vollständiges und verifizierbares Beispiel **] (http://stackoverflow.com/help/mcve) –

+0

Ich habe das gerade versucht, und es scheint hier zu funktionieren. Das Problem scheint zu sein, dass mein Körper sich nicht über die ganze Seite erstreckt, so dass seine Höhe irgendwann aufhört, und das ist auch der Grund, warum sich mein Text nicht vollständig nach unten bewegt. Was könnte ich tuen? Ich bin mir auch nicht sicher, wie ich das hier replizieren soll. –

Antwort

0

Wenn Sie mit col-MD- * dann sollten Sie col-SM- add * und col-xs- *, also, wenn Ihr Bildschirm ist klein, die geeignet CSS erhalten angewendet. Dies könnte einer der Gründe sein, warum Ihr Code nicht funktioniert.

<div class="copyright col-xs-2 col-xs-offset-10 col-sm-2 col-sm-offset-10 col-md-2 col-md-offset-10"> 
     <p>Some Copyright Stuff 2011 - 2020</p> 
    </div> 

Oder Sie können mit reinem CSS tun, wie ich den Code unten hinzugefügt, aber CSS nicht SCSS verwenden, als Browser SCSS (Nested code in scss/sass) nicht versteht.

.copyright { 
 
     position: absolute; 
 
     bottom: 0; 
 
     right:0; 
 
}
<div class="copyright"> 
 
    <p>Some Copyright Stuff 2011 - 2020</p> 
 
</div>

Verwandte Themen