CSS overflow layout

Question

I'm trying to make a layout like native desktop application for my needs but i'm not very familiar with css.

Here an example of layout I need: JSFiddle I'm trying to use overflow like this but not work:

.scrollable-container {
  border: 1px solid #00f;
  height: auto;
  overflow: scroll;
}

What I'm trying to do: - make .content div fit space between .navigation (green) and .footer (yellow) div even if window is resized - make .scrollable-container scrollable if content size is larger - make table header fixed when scrolling

Thank you.

score 0 · Accepted Answer · answered Oct 20 '17 at 16:57

0

Try to put max-height to the .scrollable-container class:

.scrollable-container {
  border: 1px solid #00f;
  overflow-y: auto;
  max-height: calc(100vh - 190px); 
}

190px is the "approximate" sum of the height of header, footer, navigation and page title.

Here is the updated fiddle

answered Oct 20 '17 at 16:57

JuanDM

1,250
10
24

Hi @JuanDM, thank you for your replay, it's exactly what I want, you have an idea for making table header fixed when scrolling ?? – doc Oct 20 '17 at 18:02
1

I think this (https://stackoverflow.com/a/20030304/2860519) is the cleanest approach to achieve that, take a look! hope it helps – JuanDM Oct 20 '17 at 18:23

CSS overflow layout

1 Answers1