Pozycjonowanie elementów menu i footer

Dla specjalistów Webmastering
#1

Witam

Tworzę szablon od początku i zastanawiam się w jaki sposób najlepiej jest zacząć pozycjonować kluczowe elementy jak menu i footer.

Menu będzie sticky dlatego przypisałem pozycję fixed, ale co np. z footerem? Jak zrobić żeby footer był zawsze na samym dole strony? Dodam że tworzę stronę nie przy pomocy “px” a “vw” czy da się jakoś wyliczyć żeby footer był zawsze na samym dole?

#2
#3

Skopiuj ten kod i wklej do pustego pliku i zapisz jako np. index.html

Może ta inspiracja Ci się przyda.

<!doctype html>
<html lang="pl">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>wpisz tytuł strony</title>
   <meta name="description" content="opis witryny">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="format-detection" content="telephone=no" />   
   <style>
      body {
      position: relative;
      padding: 0;
      margin: 0;
      }
      .container {
      font-family: Roboto;
      font-weight: 300;
      font-size: 18px;
      padding: 30px 0;
      background-color: #fff;
      margin-bottom: 148px;
      }
      
      .container-foot {
      background-color: #787878;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -9999;
      }
      .fotter-content {
      padding: 40px 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #343434;
      color: #fff;
      }
      .menu {
      padding: 40px 0;
      background-color: #ccc;
      text-align: center;
      color: #fff;
      	 -webkit-transition: all 0.3s ease 0s;
          -moz-transition: all 0.3s ease 0s;
      	-ms-transition: all 0.3s ease 0s;
      	-o-transition: all 0.3s ease 0s;
      	transition: all 0.3s ease 0s;
      }
      .sticky {
      padding: 25px 0;
      z-index: 9999;
      position: fixed;
      top:0;
      left: 0;
      right: 0;
      background-color: rgba(0,0,0,0.45);
      	 -webkit-transition: all 0.3s ease 0.3s;
      	-moz-transition: all 0.3s ease 0.3s;
      	-ms-transition: all 0.3s ease 0.3s;
      	-o-transition: all 0.3s ease 0.3s;
      	transition: all 0.3s ease 0.3s;
      }
   </style>
   
</head>
<body>
   <div class="menu">
   Tu jest menu
   </div>
   <div class="container">

   tu wklej kupę tekstu np. lorem ipsum 1000 słów a zobaczysz cały efekt    

   </div>

   
   <footer>
   <div class="container-foot">
      <div class="fotter-content">
         <h2>to jest footer</h2>
      </div>
   </div>
   </footer>      

   <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
   <script>
      $(window).bind('scroll', function(event){
   	if($(window).scrollTop() > 0) {
   		$('.menu').addClass('sticky');
   	 }
   		else 
   	{
   		$('.menu').removeClass('sticky');
   	}
   });
   </script>
</body>
</html>