[HTML][CSS] Sidebar łączący się z footerem Opcje

[Kuba707]

Mam duży problem jak zakodować stronę. Oto obrazek poglądowy: http://i.stack.imgur.com/GFbDr.png
Prosta, powszechna strona gdzie jest header, potem container na sidebar i content, a na dole footer. Z tym, że jest tu mały trick jeszcze do footera, taki że footer ma wysokość powiedzmy 80px, to to co jest nad footerem ma padding-bottom 80px + kilka innych właściwości i dzięki temu footer jest zawsze na dole. Oto link do tricku http://www.cssreset.com/how-to-keep-footer...-page-with-css/. Ale pomińmy tego footera. Klasyczna strona jak widzicie tylko problem jest z tym menu w sidebarze żeby się rociągała ta belka pionowa aż do footera. Widać doskonale o co chodzi. Trochę kombinowałem ale jedyne co zrobiłem to absolutny div z dolną częścią menu który faktycznie wygląda dobrze ale przy skróceniu szerokości okna przeglądarki wygląda to źle. Pozostaje mi chyba jQuery i eventy na zmiane szerokości okna. Chyba, że da się to jednak jakoś zrobić. Jakieś propozycje, wskazówki jak to zrobić?

EDIT:
Kod ma dużo reguł CSS i może być problem z odczytaniem. Uproszczę i wrzucę za niedługo.

Ten post edytował Kuba707 28.12.2014, 13:06:27

[trueblue]

Pokaż kod.

[Kuba707]

To taki testowy kod (odszedłem od mojej strony i testuje rozwiązanie): http://jsfiddle.net/L4k9gwqw/
Prosta strona. Header, container na sidebar i content, na dole footer + myk że container ma padding-bottom równy wysokości footera + footer absolutny dzięki czemu footer zawsze jest na dole strony i nie zjada mi treści strony gdy wysokość przeglądarki okaże się mała. Problem w tym, że chcę by w tym sidebarze było menu - grafika z belką wbitą w ziemię i przybite do niej deski. Wbite w ziemię to znaczy w footera. Czyli potrzebuję by na przykład sidebar wysokością dotykał aż footera. A kolega obok - content, niekoniecznie. Ile będzie miał treści, tyle wysokości. Oto lepsze zdjęcie poglądowe http://s10.ifotos.pl/img/hahpng_wrrxwae.png

Ja to zrobiłem tak, że dałem w body diva z belką której image się repeatuje po y, 100% wysokości strony i manipulacja z-index. Belka była widoczna zaczynając od góry pod sidebarem i chowała się pod footerem. Ale to złe rozwiązanie bo jak się szerokość strony zmieniło to z uwagi że belka absolutna to zaczęła uciekać. Nie ma nawet co wrzucać tego.

Ten post edytował Kuba707 28.12.2014, 13:31:02

[trueblue]

http://jsfiddle.net/L4k9gwqw/2/

[Kuba707]

Spoko, tylko z kolei taki problem, że jak zmniejszę wysokość przeglądarki to utnie treść w contencie, nie zobaczę całej treści i nie pojawi się suwak.

EDIT: Nie wiem czy jQuerym nie zrobie tego.

Ten post edytował Kuba707 28.12.2014, 14:07:39

[trueblue]

http://jsfiddle.net/L4k9gwqw/3/
min-height jest problematyczne, nie wiem czy z pozycjonowanie absolutnym Cię satysfakcjonuje.

[Kuba707]

No teraz jest tak, że content ma powiedzmy tam 4cm na moim ekranie przy 100% zoomie a footer jest pod ekranem gdzieś daleko. Niepotrzebnie się to rozciąga tak. Strasznie to kłopotliwe jest. Chyba zrobię tak, że zrobię podstawowy kontener z sidebar i content. Będą miały tyle wysokości ile będzie im trzeba. To znaczy sidebar będzie miał powiedzmy 200px wysokości bo tyle zajmie menu. A content w zależności od tekstu. A w body dam DIV'a absolutnego tak jak wcześniej że będzie idealnie na szerokości belki z sidebara, 100% height strony + z-indexy od headera i footera to ukryją, będzie efekt jak na zdjęciu. A przy zmianie rozmiaru okna podepnę jQuery który będzie ustawiał absolutny margines belki tej absolutnej na pozycję absolutną belki z menu sidebara.

[trueblue]

Dla section brakuje: box-sizing:border-box;
Jednak pojawia się problem kiedy jest za ciasno na wysokości.

[Kuba707]

Nom, mało tego, że ta treść się chowa, to jeszcze wyjeżdża pod footera (IMG:style_emoticons/default/tongue.gif) .

EDIT: No i zrobiłem to za pomocą jQuery do resize okna, a strukturalnie belkę dałem w divie absolutnym w body która ma 100% wysokości okna przeglądarki + manipulacja z-indexami pozostałymi elementami strony i oto efekt: http://przedszkole00.comlu.com/contact.html

Ten post edytował Kuba707 28.12.2014, 19:50:42