html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

/* main-content alanı ekran dikey boşluğunu kaplasın */
#main-content {
  flex: 1;
  /* isteğe bağlı ekstra padding */
  padding-top: 70px; /* eğer navbar sabitse */
}

/* footer artık akışın en sonunda yer alacak */
.footer {
  background: #f8f9fa;
  padding: .75rem 1rem;
  text-align: center;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  /* position: static; (varsayılan) */
}