• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Stopka na dole strony

VPS Starter Arubacloud
0 głosów
501 wizyt
pytanie zadane 24 kwietnia 2021 w HTML i CSS przez FabQ Początkujący (450 p.)

Witam chciałbym żeby moja stopka była zawsze na samym dole strony. Zarówno gdy jest mało treści jak i dużo.

Gdy daje stopce:

position: absolute; bottom: 0;

to w przypadku gdy treści jest dużo stopka na nią nachodzi, wie ktoś jak to rozwiązać?

2 odpowiedzi

+1 głos
odpowiedź 24 kwietnia 2021 przez Wiciorny Ekspert (269,120 p.)
Lekturę, ogólnie polecam stronę.
https://css-tricks.com/couple-takes-sticky-footer/
komentarz 24 kwietnia 2021 przez FabQ Początkujący (450 p.)
edycja 24 kwietnia 2021 przez FabQ

Zrobiłem tak jak w poradniku różnymi sposobami i cały czas pojawia się ten sam problem, że zawartość razem ze stopką są na samym dole strony

view-source:http://castlecraft.pl/app/  <-- tutaj macie źródło mojej strony.

footer.css

footer html

komentarz 24 kwietnia 2021 przez Wiciorny Ekspert (269,120 p.)
wrzuć na code-pen lub  inne źródło, a nie jako pliki txt.
komentarz 24 kwietnia 2021 przez FabQ Początkujący (450 p.)
<!DOCTYPE HTML>
<html lang="pl">
  <head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>CastleCraft</title>
  <link rel="shortcut icon" href="/app/picture/logo.png">
  <?php require('require/fonts.txt'); ?>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/app/css/header.css">
  <link rel="stylesheet" href="/app/css/footer.css">
  <style>
html, body {
    margin:0;
    padding:0;
    height:100%;
    position:relative;
  }
#container{
  min-height: 100%;
  position:relative;
}
#footer{
  position: absolute;
  width: 100%;
  font-family: 'Teko', sans-serif;
  color: gray;
  height: 30px;
  background-color: black;
}
#footer a{
  color: #0080FE;
  text-decoration: none;
}
#footer a:hover{
  text-decoration: underline;
}
  </style>
    </head>
  <body>
    <div id="container">
    <?php require('require/header.txt'); ?>
    <span style="font-size: 30px;">TREŚĆ</span>
</div>
    <div id="footer"><center>&copy2021 CastleCraft | <a href="#">Regulamin i warunki</a> | <a href="#">Polityka Prywatności</a></center></div>
  </body>
</html>

 

komentarz 24 kwietnia 2021 przez FabQ Początkujący (450 p.)
i dalej jest ten sam problem
0 głosów
odpowiedź 24 kwietnia 2021 przez CubeStorm Pasjonat (15,020 p.)

To co ja aktualnie widzę na twojej stronie to stopka, która jest pozycjonowana przy użyciu fixed względem okna przeglądarki. Proponowałbym ci pozycjonowanie jej przy użyciu absolute względem body. Na body możesz dodać position: relative;

Jeśli teraz stopka będzie gdzieś na dole strony, a dalej zasłaniała końcówkę tekstu to możesz użyć nie bottom: 0, a bottom: -$WYSOKOŚĆ_STOPKI.

komentarz 24 kwietnia 2021 przez FabQ Początkujący (450 p.)
nie pomogło :(

Podobne pytania

0 głosów
1 odpowiedź 470 wizyt
pytanie zadane 17 lutego 2020 w HTML i CSS przez Antoni2422 Użytkownik (570 p.)
0 głosów
1 odpowiedź 1,046 wizyt
0 głosów
5 odpowiedzi 8,629 wizyt
pytanie zadane 11 listopada 2015 w HTML i CSS przez Duduś Początkujący (380 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...