Adaptive height MainContent

Adaptive height MainContent

  

Hi,

Can I ajust the height from the MainContent, in way to have the same results in diferent types of resulutions?

Im searching for this because I want to have something like this:

The only part that Scrolls in Page is the Table Records.

Using this css right now to get the effect:

div.MainContent {
    overflow-y: auto;
    height: 600px;
    position: absulute;
}

Hello Henrique,

Try this:
height: 100%;
overflow-y: auto;
width: 100%;

(Besides this, you have a typo in the position attribute. It's absolute, not absulute.)

Best Regards

I had already tested that and it didnt result. If I do that, I got this result.

600px height:

100% height:

Thanks for the time,

Henrique Leite

Maybe I misunderstood your question.

So, you always want the scroll bar? If it's that, change the overflow-y property to scroll.

Best Regards

Ye, I want the Scroll bar. Here the problem is that if i define the size to 600px, in monitors that have one resolution lower then 1080p the table will not fit on the screen.

What I want is a property that adapt the height of the table according the resolution of the monitor.

Thanks for the time,

Henrique Leite

Solution

Instead of 100% use 100vh and 100vw.

It works in most modern browsers...

And it simply means viewport-height and viewport-width

Solution