Stopka w CSS

pytanie zadane 4 stycznia 2017 w HTML i CSS przez Latajace_kolano Nowicjusz (120 p.)
zmienione kategorie 4 stycznia 2017 przez Comandeer

Witam. Utworzyłem stronę której kontenty oraz stopki są reprezentowane przez div-y. Chciałbym ją tak zmodyfikować aby stopka była na dole okna przeglądarki przy scrollowaniu ale żeby nie zasłaniała div-a nad sobą.

<html>
<head>

<style>
     

      div 
	  {
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
		
		
		
      }

      #header
	  {
	   width:100%;
	   height:50px;
	   background:#ACACAC;
	   margin-bottom:20px; 
       position:relative;
   
      }
	  
	  #center_c
	  {
	   width:80%;
	   float:center;
	   background:#ACACAC;
	   margin:1% 10%;
	   height: 170;
	   position: relative;
	  }
	  
	  #center_d
	  {
	   width:80%;
	   float:center;
	   background:#ACACAC;
	   margin:1% 10%;
	   height:550;
	   margin-bottom: 10%;
	   position: relative;
	   
	   
	  }
	  
	  #footer
	  {
	  
	  width:100%;	
	  height:10px;
	  background:#ACACAC;
	  float:left;
	  margin-top:10;
	  position: fixed;

      bottom: 2px;
	  
	  
	  
	  }
	  
    </style>
</head>
<body>


    <div id="header"> </div>

	<div id="center_c">
	<div></div><div></div>
	</div>
	<div id="center_d"> </div>
	
	
	<div id="footer"> </div>



</body>
</html>

2 odpowiedzi

odpowiedź 4 stycznia 2017 przez pablop76 VIP (123,180 p.)

Witam. Swego czasu również szukałem odpowiedzi na to pytanie i jak dla mnie najlepszym rozwiązaniem okazało się to: CSS Sticky Footer, Footer Stick to Bottom of Page

Co oznacza w twoim kodzie

float: center; (nie ma takiej wartosci)

position: relative; (w jakim celu)

height: 170;( gdzie jednostka)

margin-top:10;

float:left; (przecież nie ustawiasz elementów obok siebie)

Zaraz dostaniesz kultowe pytanie dlaczego stylizujesz po id.

Dlaczego mieszasz (niewłaściwie) % z px.

Twój kod:

<!DOCTYPE html>
<html>
<head>
  <title></title>
<style>
*{
box-sizing:border-box;
margin: 0;
}
html,body {
margin:0;
padding:0;
height: 100%;
}
body
{
background-color: #2e83d4;
color: white;
text-align: center;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.header{
background:#ACACAC;
}
.center_c{
width:80%;
background:#ACACAC;
margin:1% 10%;
} 
.center_d{
width:80%;
background:#ACACAC;
margin:1% 10%;
}  
.footer{ 
background:#ACACAC;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
  <div class="wrapper">
  	 <div class="header">HEADER</div>
    <div class="center_c">CENTER C</div>
    <div class="center_d">CENTER D</div>
  <div class="push"></div>
  </div>
    <div class="footer">FOOTER</div>
</body>
</html>

odpowiedź 4 stycznia 2017 przez Comandeer Guru (601,110 p.)

http://www.forumweb.pl/html/stopka-na-samym-dole-strony/201284#201284

komentarz 4 stycznia 2017 przez Comandeer Guru (601,110 p.)

Dostałeś link, w którym jest odpowiedź na Twoje pytanie… To jest wg mnie pomoc.

komentarz 4 stycznia 2017 przez HaKIM Szeryf (87,590 p.)

Szlachcic się znalazł...

W ogóle zajrzałeś do tego linku?

Jeżeli liczysz, że ktoś przerobi kod za Ciebie, to muszę Cię ostrzec, że jest to niezgodne z regulaminem forum mówiącym o gotowcach.

Chciałbym ją tak zmodyfikować aby stopka była na dole okna przeglądarki przy scrollowaniu ale żeby nie zasłaniała div-a nad sobą.

Więc ją zmodyfikuj bazując na poście Roberto.

1	komentarz 4 stycznia 2017 przez Latajace_kolano Nowicjusz (120 p.) Nigdy na to nie liczę i nie liczyłem. Muszę przeprosić ale się zdenerwowałem bo próbuję się uczyć tworzyć strony a ten element już długi czas mi nie wychodzi