Stopka na dole strony

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

odpowiedź 24 kwietnia 2021 przez Wiciorny Ekspert (281,310 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 (281,310 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

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.