How to code a responsive single page application holding in one screen?

Question

I'm trying to code a single page application holding inside a single screen with the following architecture :

One fixed header having :
- Two columns (1/3 for left, 2/3 for right) :
  - a logo on left
  - a breadcrumb on right.
One fixed body having :
- Two columns (1/3 for left, 2/3 for right) :
  - a vertical container with its scroll bar:
    - one block of links
    - one block of social media links, credits, etc (that one should be always at bottom, as a footer)
  - the content container with its scroll bar

The actual layout is showed on the following picture : https://ibb.co/2ybxxdy

I have already tried to do it with Bulma css framework and some custom css.

.scroll {
  overflow: auto;
}

.no-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
}

Here is a JsFiddle of what I did : http://jsfiddle.net/97a6fgtp/7/

I'm totaly open to any other framework or pure css way to do it.

score -1 · Answer 1 · answered Jun 15 '19 at 11:29

-1

You can try Bootstrap framework for the layout you have drawn. I would suggest you try it once if you've never worked on it before.

answered Jun 15 '19 at 11:29

Ravi Pandit

Thanks for your reply. I already used Bootstrap for other projects and never found a full screen component with its scroll bar. I can't find one with your link, can you precise which component will do the job ? – mlisthenewcool Jun 15 '19 at 13:03

1 Answers1