I am working on developing a single-page application that fits within one screen with the following structure:
There is a fixed header that includes:
- Two columns (1/3 for left, 2/3 for right) :
- a logo on the left
- a breadcrumb on the right.
- Two columns (1/3 for left, 2/3 for right) :
The main body consists of :
- Two columns (1/3 for left, 2/3 for right) :
- a vertical container with a scroll bar:
- a block of links
- a block of social media links, credits, etc. (this should always be at the bottom like a footer)
- the content container with its own scroll bar
- a vertical container with a scroll bar:
- Two columns (1/3 for left, 2/3 for right) :
A visual representation of the layout can be seen in this image: https://ibb.co/2ybxxdy
I have attempted to achieve this using the Bulma CSS framework and some custom CSS.
.scroll {
overflow: auto;
}
.no-scroll {
display: flex;
justify-content: center;
align-items: center;
}
You can view what I have done so far on JsFiddle: http://jsfiddle.net/97a6fgtp/7/
I am open to exploring other frameworks or alternative pure CSS methods to achieve the desired layout.