Nie mogę dojść jak zrobić taki layout

Question

Witam

 

Chcę uzyskać taki responsywny layout:

https://codepen.io/KrisPOD/pen/NpoQWa?editors=1100#0

a dla mobile chcę aby poukładało się w taki sposób - MENU pod spodem LEFT pod spodem RIGHT pod spodem FOOTER

prawie jest ale FOOTER nakłada się na LEFT stronę - przykrywa jej zawartość

chcę aby LEFT strona się nie rozciągała pod wpływem contentu

RIGHT strona miała suwak ale tylko ona a nie cała strona - czyli zawartość RIGHT przesuwa się w dół/góra tylko w sobie

całość strony dopasowuje się do wysokości ekranu

do tego nie mam pojęcia czemu txt LEFT jest do krawędzi gdzie w pozostałych elementach txt jest odsunięty od krawędzi

może ktoś podać jakąś podpowiedź na takie rozwiązanie, pokierować bardziej szczegółowo ? bo siedzę już nad tym i nie mogę dojść jak to zrobić

będę wdzięczny za podpowiedź - dzięki

KrisPOD

 

PS. tu moje jeszcze inne wypociny jeśli chodzi o ten układ:

https://codepen.io/KrisPOD/pen/QpowJZ?editors=1100#0

https://codepen.io/KrisPOD/pen/PpVrRZ

https://codepen.io/KrisPOD/pen/aJPqxK

Answer 1

W CSS danego diva użyj właściwości 'overflow'. 
Za jej pomocą ustawiasz co się ma dziać w przypadku przepełnienia diva. 

Jeżeli np. w RIGHT chcesz mieć scrolla to starczy dodać w css ->  overflow: scroll;

Tu masz więcej informacji o tym i możliwe przyjmowane wartości. 

https://www.w3schools.com/cssref/pr_pos_overflow.asp
 

Comments

ok ... a czemu mi ten FOOTER w wersji mobile przykrywa RIGHT stronę ? jaki tam dać position aby nie przykrywało ale było "doczepione" do dołu RIGHT ?

http://codepen.io/KrisPOD/pen/NpoQWa?editors=1100#0