Stopka przylegająca do dolnej części ekranu

Dzień dobry,
jak za pomocą div oraz css zrobić taki układ jak został ukazany poniżej:

Przy czym najbardziej interesuje mnie jak zrobić aby bez względu na rozdzielczość czy skalowanie ,,stopka" zawsze przylegała do dolnej części okna przeglądarki.

OK, a co w sytuacji, w której danych w tabelce będzie więcej, niż się mieści na ekranie - czy wtedy stopka ma być POD nimi, ale póki nie przewiniesz treści strony to ma być ponizej dolnej krawędzi ekranu, czy chcesz, żeby była przyklejona na stałe do dołu - niezależnie, czy wszystkie dane się mieszczą na ekranie, czy jest ich więcej i jest konieczność przewijania - czyli żeby była taką jakby nakładką na treść główną?

fixed, bottom-0

@cerrato: najważniejsze aby footer zawsze był przyklejona na dole :)

Dwa grzyby w barszcz to bywa za dużo.

O ile przyklejenie góry (górna nawigacja) prawie zawsze wychodzi dobrze (przyklejenie, w sensie dla przewijania duzej zawartości działa dobrze),
To dolne, albo bardzo dobrze zaprojektowane, albo wq...a
Jak pochodzisz po sklepach i portalach, więcej znajdziesz tego kejsu że wq...a

EDIT: To trochę inaczej sie odczuwa dla danych tabelarycznych, inaczej dla złożonego tekstu (wiki) a jeszcze inaczej jak centrum sie trudną do określenia sieczką jak na portalach

Co w sytuacji gdy jedna ze środkowych sekcji jest dłuższa niż wysokość ekranu - mają się scrollować wszystkie razem czy tylko pojedyncza kolumna, która jest za długa (w przypadki gdy wszystkie będą za długie będą tu 3 scrollbary)?

dzek69 napisał(a):

Co w sytuacji gdy jedna ze środkowych sekcji jest dłuższa niż wysokość ekranu - mają się scrollować wszystkie razem czy tylko pojedyncza kolumna, która jest za długa (w przypadki gdy wszystkie będą za długie będą tu 3 scrollbary)?

Słuszne spostrzeżenie.

Mam wrażenie, że kol rzucił ideę, ktora jest dobra na papierze, ale najstarsi indianie wie wiedzą czy/jak przystaje do szegółów ktore nadejdą.
Dodam, @virusek391 tylko trzema słowami okreslasz, co to naprawdę jest, w praktyce my nie wiemy.

Jeśli dobrze rozumiem, to w zasadzie chcesz mieć

• nagłówek, menu, główną treść i tabelkę z danymi
• gdzieś tam osobno stopkę całkowicie oddzielnie od nich, która ma przylegać do dołu przeglądarki?

?
no to:

• nagłówek w div
• menu, główna treść i tabelka z danymi w kontener flex
• stopka na position: fixed

tak jak tutaj:
https://jsfiddle.net/u9xnkcsh

<div>header</div>
<div class="foo">
  <div class="a">
      lewa
  </div>
   <div class="b">
        treść
  </div>
  <div class="c">
    prawa
  </div>
 
</div>

<div class="footer">
 to jest stopka XD
</div>

.foo {
  display: flex;
}

.a, .b, .c {
  border: 1px solid red;
  flex-grow: 1;
}

.footer {
  position: fixed;
  background: black;
  color: white;
  height: 30px;
  width: 100%;
  bottom: 0px;
  left: 0;
}

Position fixed jest tu zbędne @LukeJL, w dodatku powoduje, że content powinien mieć dodatkowo jakiś padding/margin, żeby nie chował się pod stopką.

https://jsbin.com/leqipamige/edit?html,css,output

tutaj opcja, gdzie kolumny w środku są niezależne - każda ma swój scrollbar

dzek69 napisał(a):

Position fixed jest tu zbędne @LukeJL, w dodatku powoduje, że content powinien mieć dodatkowo jakiś padding/margin, żeby nie chował się pod stopką.

position: fixed jest po to, żeby ,,stopka" zawsze przylegała do dolnej części okna przeglądarki.. Ja tak rozumiem pierwszy post, że stopka ma być całkowicie oddzielnie od reszty. Ale czytając kolejne posty widzę, że temat podryfował w zupełnie inne rozumienie tego, co autor pierwotnie napisał.

Idąc w kolejne wariacje można zastosować jeszcze position: sticky, czyli będzie przylegać do okna przeglądarki, chyba, że się zjedzie w dół, to będzie przylegać do contentu:
https://jsfiddle.net/gukr19L2/