CSS Bootstrap težava

Pozdravljeni,

naletel sem na težavo, ki nevem čisto kako se jo lotiti. Za lažjo predstavo sem ustvaril sliko. Torej v bootstrapu želim narediti design kot je prikazan na sliki vendar mi nikakor ne uspe. Rad bi da bi content imel določen max-width (pri mobilni verziji bi se prilagajal tako kot bootstrap). Main content in sidebar bi morala držati tudi višino glede na količino vnešenega besedila - torej dodajanje praznega prostora v sidebaru, če je v main contentu več besedila in obratno. Poskušal sem že s 4 stolpci čez cel ekran (ter prekrivanjem spodaj in zgoraj na zadnjih dveh stolpcih)... z sliko spodaj in zgoraj čez cel ekran in še kaj vendar brez sadov :). Ima mogoče kdo idejo kako to najboljše izvedit z bootstrapom (lahko tudi brez).

Si želel kaj takega ali mora main gledati čez header in footer?

https://jsfiddle.net/o7s42cqy/

P.S. Pri manjših resolucijah bi edino izklopil shadow, ki jo ima main. To sem pozabil.

Hvala za pomoč. Očitno sem bol slabo razložil... sem naredil še eno sliko. Problem je v z debelo označenem rdečem delu. Mora iti do konca strani neglede na velikost ekrana.

Ne razumem čisto. Kaj točno mora iti do konca? Main gor dol ali header in foter levo in desno? Sploh potrebuješ moder header in footer?

Ena varianta bi mogoče bila takšna:

-narediš vrstico z dvemi div-i s polovičnimi širinami (.col-xx-6), desnemu div-u daš background header-ja

-v glavni element za vsebino dodaj še en div, ki ga potem absolutno pozicioniraj

-prekrivanje vrstice iz prvega koraka in div-a znotraj glavnega elementa rešiš z z-index

Proof of concept: https://jsfiddle.net/esedic/2pcqbyq4/embedded/result/

Seveda bi moral to še malo dodelati.

Super ideja, hvala. Bom jutri še pregledal kako bi v tej smeri rešil zadevo.

To je že pa skoraj to če koga zanima (malo .js sem še dopisal za raztegovanje, čeprav se vrjetno da tudi z css reši). https://jsfiddle.net/2pcqbyq4/1/

Tako?

https://jsfiddle.net/o7s42cqy/2/

Hvala vama za pomoč. Sem izvedel zadevo tako kot sem si zamislil.

LP