Stopka startowa o pełnej szerokości strony

Projektuję stronę internetową z joomla i korzystam z frameworka bootstrap. Teraz mam problem przez stopkę. Zasadniczo używam prostego układu siatki i chcę części treści witryny na środku strony z miejsca po lewej i prawej stronie, które już osiągnąłem. A teraz chcę, aby stopka nie znajdowała się pośrodku, tak jak treść, ale na końcu strony i na całej jej szerokości, a NIE JEST NAPRAWIONA. Więc zwykle chcę przewinąć stronę, a na jej końcu pojawi się stopka o pełnej szerokości. Szukałem go przez długi czas, ale nie znalazłem żadnego rozwiązania, które działało. Mam nadzieję, że ktoś może mi pomóc, aby go osiągnąć ...Stopka startowa o pełnej szerokości strony

Poniżej są skrypty PZP stronie i plik css użyłem

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>

styl. 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; 
}

poważaniem oodoloo

Źródło

2014-04-09 oodoloo

Możesz umieścić stopkę, aby oddzielić <div class="container"> po głównym kontenerze treści. Następnie możesz przypisać klasę kontenera, która nie ogranicza szerokości stopki, tak jak dzieje się z główną treścią. Np ::

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

Źródło

2014-04-09 18:24:56

Dzięki za szybką odpowiedź! Próbowałem tego, ale to nie było wystarczające dla moich potrzeb. Teraz nie wiem, jak mogę osiągnąć, że div wypełnia całą stronę. A kiedy ustawię szerokość poprawki, div powiększy się tylko na prawą stronę, lewa strona zaczyna się już w punkcie, w którym zaczyna się zawartość. Czy możesz mi jeszcze raz pomóc? – oodoloo

Czy można utworzyć izolowany i powtarzalny przykład udostępniony na jsfiddle.net lub codepen.io? O ile nie można przeczytać i edytować aktualnego kodu, bez zbytniego wysiłku, można podać tylko ogólne porady. –

Ok, tutaj [jsfiddle-przykład] (http://jsfiddle.net/Pxmv7/) stworzyłem przykład. Dla stopki na końcu chcę osiągnąć wynik opisany w moim pierwszym poście. Mam nadzieję, że to pomoże rozwiązać problem. Do reprodukcji tego, co opisałem w moim ostatnim komentarzu, należy dodać do stopki css "width: 800px" lub "width: 1500px" na przykład. – oodoloo

dla moich potrzeb, teraz Naprawiłem to jak widać tutaj: jsfiddle-example

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

Dodałem "width: 100%", "position: absolute", " left: 0 "i" right: 0 "do klasy css" .footer ". Myślę, że decydująca była "pozycja: absolutna". Następnie muszę dodać "left: 0", ponieważ po lewej stronie nie ma pełnych rozmiarów. po dodaniu tego robi. "Prawe: 0" i dodane, ze względu na kompletność. Nie wiadomo, czy jest potrzebna w innej przeglądarce. Tutaj działa również bez niego.

Źródło

2014-05-10 10:42:16 oodoloo

Tak, lewo 0, prawo 0 naprawiono dla mnie. –

zrobić to i to ma rację:

@media(max-width:500px){ 

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

}

Źródło

2016-08-31 21:19:07 Cristian

Stopka startowa o pełnej szerokości strony

Odpowiedz

Powiązane problemy