Jak zrobić by stopka była zawsze na dolę?

pytanie zadane 13 września 2020 w HTML i CSS przez Robot 12 Początkujący (340 p.)

Hej zaczynam swoją przygodne z HTML i CSS tworze swoją 1 stronę i mam problem bo stopka nie chce się czy mać dołu.

CSS

body
{
    background-color: #868686;
     margin:0;
	padding:0;
    height:100%;
}
#container
{
margin: -11px -10px -10px -10px ;
min-height:100%;
position:relative;
}
#pasek_gura
{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
	min-height: 100px;
	background-color: #262626;
	z-index: 10;

}
#logo
{   
    padding: 5px;
    float: left;
}
#Kontakt
{
    text-decoration: none; 
    min-height: 40px;
    padding: 10px;
    margin-right: 1px;
    float: right ;
    color: #ececec;
}
#Kontakt:hover
{
    background-color: #393939;
}
#Wspierajoncy
{
    text-decoration: none; 
    min-height: 40px;
    padding: 10px;
    margin-right: 1px;
    float: right ;
    color: #ececec;
}
#Wspierajoncy:hover
{
    background-color: #393939;
}
#Poradniki
{
    text-decoration: none; 
    min-height: 40px;
    padding: 10px;
    margin-right: 1px;
    float: right ;
    color: #ececec;
}
#Poradniki:hover
{
    background-color: #393939;
}
#home
{
    text-decoration: none; 
    min-height: 40px;
    padding: 10px;
    margin-right: 1px;
    float: right ;
    color: #ececec;
}
#home:hover
{
    background-color: #393939;
}
#informacje
{
    padding: 300px;
    color: #ececec;
    min-height: 300px;
    background-color: #737373;
    clear: both;
}
#Naguwek
{
    font-size: 30px;
    position:relative;
    Top:-190px;
}
#innfo
{
    position:relative;
    Top:-100px;
}
#dolanczanie
{
    font-size: 40px;
    padding: 10px;
    background-color:#262626;
    color: #ececec;
    min-width:400px;
}
#dolanczanie:hover
{
    background-color: #393939;
}
#adminstracja
{
    padding: 40px;
    color: #ececec;
    min-height: 1000px;
    background-color: #868686;
}
#aNagluwe
{
    font-size: 35px;
}
#Robot
{
    padding: 40px;
    color: #ececec;
    min-height: 250px;
    position:relative;
    left: -20px;
}
#kaczor
{
    text-align: left;
    padding: 40px;
    color: #ececec;
    min-height: 250px;
    position:relative;
    left: -20px;
}
#brajan
{
    text-align: right;
    padding: 40px;
    color: #ececec;
    min-height: 250px;
    position:relative;
    left: -20px;
}
#grenek
{
    text-align: right;
    padding: 40px;
    color: #ececec;
    min-height: 250px;
    position:relative;
    left: -20px;
}
#stopka
{
	    padding: 0px;
    min-height: 70px;
    background-color: black;
    color: #ececec;
    clear: both;

}






#pszerwa
{
        font-size: 40px;
    padding: 10px;
    color: #ececec;
    margin-left: 100px;
	margin-right: 100px;
	min-height: 600px;
}


#kontakt
{
    padding: 10px;
    color: #ececec;
    margin-left: 100px;
	margin-right: 100px;
	min-height: 600px;
}

Wiem że były już tu takie wątki ale żadne rozwiązanie nie chciało mi działać.

1	komentarz 13 września 2020 przez gnu_ewm Gaduła (3,340 p.) Tworząc stronę dobrą praktyką jest używanie angielskich nazw.

komentarz 19 września 2020 przez RobertGelu Nowicjusz (160 p.)

<div id="footer">

Something tralalala

</div>

w CSS

div#footer   {
   position:fixed;
   width: 100%;
   border: 4px solid #7c7;
   background-color: black;
   color: white;
   text-align: center;
   bottom: 0px;
}

2 odpowiedzi

odpowiedź 13 września 2020 przez KosaTV Obywatel (1,260 p.)
wybrane 13 września 2020 przez Robot 12

Najlepsza

Masz straszny bałagan w kodzie i to on powoduje problemy. Zamieniłem tylko trochę ten kod html żeby chociaż działał, ale nadal uważam że praktycznie wszystko jest do poprawy, a potem pozmieniaj sobie co tam chcesz.

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="imige/logo.png">
    <title>Polski RoolPlay Discord</title>
    <meta name="description" content="Strona serwera Polski RoolPlay Discord" />
    <meta name="keywords" content="PRD,RP,POLSKI,polska" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
     
    <link rel="stylesheet" href="index.css" type="text/css" >
</head>
<body>
 
	<div id="container">
		<div id="pasek_gura">
			 <div id="logo">
			<img src="imige/logo.png" width="150" height="90" />
			</div>
			
			<a href="Kontakt.html">
			<div id="Kontakt">
			<h1>Kontakt</h1>
			</div>
			</a>
			
			<a href="Wspierajacy.html">
			<div id="Wspierajoncy">
			<h1>Wspierający</h1>
			</div>
			</a>
			
			<a href="Poradnik.html">
			<div id="Poradniki">
			<h1>Poradniki</h1>
			</div>
			</a>
			
			<a href="index.html">
			<div id="home">
			<h1>Home</h1>
			</div>
			</a>
			
		</div>
			<div>
			</div>
		 <div id="footer">
			<h6>Wszelkie prawa zastrzeżone <br>©Autor: Robot 12<br><h6>
		</div>
	</div>
 
</body>
</html>

odpowiedź 13 września 2020 przez EdeX Mądrala (5,130 p.)

1. Proszę powiedz, że specjalnie napisałeś te błędy ortograficzne

2. Height nie ustawia się w % przynajmniej póki się nie ustali wysokości danego "pudełka" w vh

3. Próbowałeś bottom:0;

komentarz 13 września 2020 przez Robot 12 Początkujący (340 p.)

@EdeX, bottom:0; nie działa

#stopka
{
	    padding: 0px;
    min-height: 70px;
    background-color: black;
    color: #ececec;
    clear: both;
    bottom:0;
}

A jeżeli chodzi o błędy mam dysortografie.

1	komentarz 13 września 2020 przez KosaTV Obywatel (1,260 p.) Nie działa bo nie ustawiłeś pozycji. Dodaj to: position: absolute; W tedy bottom zadziała.

komentarz 13 września 2020 przez Robot 12 Początkujący (340 p.)

Dodałem i nic się nie zmieniło oprócz tego że musiałem dodać width: 100% bo inaczej stopka była w rogu.

;#stopka
{
        padding: 0px;
    min-height: 70px;
    background-color: black;
    color: #ececec;
    clear: both;
    width: 100%;
    position: absolute;
    bottom:0;
}

1	komentarz 13 września 2020 przez KosaTV Obywatel (1,260 p.) Czy ta stopka "siedzi" w czymś?

komentarz 13 września 2020 przez Robot 12 Początkujący (340 p.)

w container

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<link rel="shortcut icon" href="imige/logo.png">
	<title>Polski RoolPlay Discord</title>
	<meta name="description" content="Strona serwera Polski RoolPlay Discord" />
	<meta name="keywords" content="PRD,RP,POLSKI,polska" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>

	<div id="container">
		<div id="pasek_gura">
			<div id="logo">
					<img src="imige/logo.png" width="150" height="90" />
			 </div>
			 <a href="Kontakt.html">
			    <div id="Kontakt">
					<h1>Kontakt</h1>
			    </div>
			 </a>
			 <a href="Wspierajacy.html">
			    <div id="Wspierajoncy">
					<h1>Wspierający</h1>
			    </div>
			 </a>
			 <a href="Poradnik.html">
			    <div id="Poradniki">
					<h1>Poradniki</h1>
			    </div>
			 </a>
			<a href="index.html">
				<div id="home">
					<h1>Home</h1>
				</div>
			</a>
		</div>
		<div>
		    
		    
		</div>
		<div id="stopka">
		    <h6><p style="text-align: center"><br>Wszelkie prawa zastrzeżone ©<br>Autor: Robot 12</p></h6>
		</div>
	</div>

</body>
</html>