Bootstrap Footer, Volle Breite der Seite

Ich entwerfe eine Website mit Joomla und mit dem Bootstrap-Framework. Jetzt habe ich ein Problem von meiner Fußzeile. Grundsätzlich benutze ich ein einfaches Grid-Layout und ich möchte den Inhalt Teil der Website in der Mitte der Seite mit Platz auf der linken und der rechten Seite, die ich bereits erreicht habe. Und jetzt möchte ich die Fußzeile nicht in der Mitte wie der Inhalt aber am Ende der Seite und über die gesamte Breite davon und NICHT FIXED. Ich möchte also normalerweise die Seite runterscrollen und am Ende sollte die Fußzeile mit voller Breite erscheinen. Ich suchte lange danach, aber ich finde keine Lösung, die funktionierte. ich jemand hoffen kann mir ... sindBootstrap Footer, Volle Breite der Seite

Im folgenden erreichen helfen, die Skripte der PHP-Seite und die CSS-Datei i

verwendet

index.php

<!DOCTYPE html> 
<html> 
<head> 
    <jdoc:include type="head" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    <!-- main container --> 
    <div class='container'> 
     <!-- header --> 
     <div class="mainMenuTop"/> 
     <div class='row'> 
      <jdoc:include type="modules" name="position-1" style="well" /> 
     </div> 
     <div class='row'> 
      <!-- main content area --> 
      <div class='span12'> 
       <div class="article"> 
        <jdoc:include type="component" /> 
       </div> 
      </div> 
     </div> 
     <!-- footer --> 
     <div class='row'> 
      <div class='span12'> 
       <div class='footer'> 
       <jdoc:include type="modules" name="footer" style="none" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

Stil. css

body 
{ 
    overflow-y: scroll; 
    background: url(../images/Test.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.article 
{ 
    padding: 25px; 
    margin-top: 30px; 
    margin-bottom: 30px; 
    border-radius: 18px; 
    background: rgba(255, 255, 255, 0.5); 
    background: rgba(255, 255, 255); /* The Fallback */ 
    font-size: 12pt; 
    font-family:"Calibri", Times, serif; 
} 

.footer 
{ 
    height: 50px; 
    border-top: solid 1px black; 
}

Mit freundlichen Grüßen, oodoloo

Quelle

2014-04-09 oodoloo

Sie können Ihre Fußzeile nach dem Hauptinhaltscontainer auf <div class="container"> setzen. Dann können Sie eine Container-Klasse zuweisen, die die Breite der Fußzeile nicht einschränkt, wie es beim Hauptinhalt der Fall ist. ZB ::

<div class="container"> 
     ... 
</div> 
<div id="footer" class="container-fluid"> 
    <div class="row">....</div> 
</div>

Quelle

2014-04-09 18:24:56

Vielen Dank für die schnelle Antwort! Ich habe das versucht, aber das war nicht genug für meine Bedürfnisse. Jetzt weiß ich nicht, wie ich erreichen konnte, dass das Div die ganze Seite ausfüllt. Und wenn ich eine feste Breite einstelle, wird das div nur auf die rechte Seite vergrößert, die linke beginnt bereits an dem Punkt, an dem der Inhalt beginnt. Kannst du mir bitte noch einmal helfen? – oodoloo

Können Sie ein isoliertes und wiederholbares Beispiel erstellen, das auf jsfiddle.net oder codepen.io freigegeben ist? Sofern Sie den eigentlichen Code nicht ohne großen Aufwand lesen und bearbeiten können, können nur allgemeine Hinweise gegeben werden. –

Ok, hier [jsfiddle-example] (http://jsfiddle.net/Pxmv7/) habe ich ein Beispiel erstellt. Für die Fußzeile am Ende möchte ich das Ergebnis erreichen, das ich in meinem ersten Post beschrieben habe. Hoffe, dies hilft, das Problem zu lösen. Für die Wiedergabe, was ich in meinem letzten Kommentar beschrieben habe, müssen Sie zum Beispiel die Fußzeile css 'width: 800px' oder 'width: 1500px' hinzufügen. – oodoloo

für meine Bedürfnisse, jetzt habe ich es fest, wie Sie hier sehen können: jsfiddle-example

.footer 
{ 
    height: 50px; 
    background-color: black; 
    position: absolute; 
    left: 0; 
    right: 0; 
    width: 100%; 
}

ich hinzugefügt haben "width: 100%", "position: absolute", " links: 0 "und" rechts: 0 "zur css-Klasse" .footer ". Ich denke entscheidend war die "Position: absolut". Dann muss ich die "links: 0" hinzufügen, weil die linke Seite nicht die volle Größe nimmt. nach dem Hinzufügen tut es es. Das "Recht: 0" habe ich hinzugefügt, wegen der Vollständigkeit. Weiß nicht, ob es in einem anderen Browser benötigt wird. Hier klappt es auch ohne es.

Quelle

2014-05-10 10:42:16 oodoloo

Ja, links 0, rechts 0 reparierte es für mich. –

Ich tue dies, und es ist richtig:

@media(max-width:500px){ 

    .footer{ 
     float:left; 
     width:109%; 
     margin-left:-5%; 
    } 

}

Quelle

2016-08-31 21:19:07 Cristian

Bootstrap Footer, Volle Breite der Seite

Antwort

Verwandte Themen