Split screen but some information don't come up

[Corobori]

I am trying to divide the right column of my screen in 2 parts. The issue is that I need to allow the div scroll to appear. The top part seems to work fine (#1 on the image) when I am reducing the screen size but not the bottom part where the submit button disappears (#2).

.curso {
    overflow-y: auto;
    height: 50%;
    margin-bottom:20px
}
.tutor {
    overflow-y: auto;
    height: 50%;
}

When using pixels it works fine #3

curso {
    overflow-y: auto;
    height: 300px;
    margin-bottom:20px
}
.tutor {
    overflow-y: auto;
    height: 200px;
}

but on bigger screen using pixels doesn’t look great

[PaulOB]

Hi,

Without seeing the page and its actual behaviour its hard to give a proper answer but it sounds like you should set the bottom part at a fixed px/rem height if you want it all to show and set the top to a percentage height to allow it to scroll.

You could set the top part using calc to 100% minus the height of the bottom part in rems e.g. calc(100% - 13rem) or something like that. Assuming that 13rems is enough for the bottom part.

All in all sounds a bit of an odd thing to do.

[Corobori]

Thank you PaulOB,

The page is not live so I can’t give access to it but I’ll try to explain what I am trying to achieve perhaps you’ll have a better idea.

What I have got on the right side are 2 things: a Table of contents and a form, the 1st has got a variable height, as it can have 4, 10 or 20 rows. The form must always be visible on the bottom part of that column so user can access it.

[PaulOB]

I’d do something like this with flexbox.

(View on codepen for full effect)

Is that close?

[Corobori]

It looks good, later on today or tomorrow I’ll try it in my real project

[Corobori]

So close ! I mean it behaves just fine but for some reason the button below the form is chopped. Perhaps Bootstrap is doing something I am missing.

[PaulOB]

It’s hard for me to say but it looks as though you have crossed out the 10px height for the button but I don’t see another height put in place. Maybe try putting in a height (probably 48px) as that is the line-height.

If that doesn’t work then post me the html for that right side and I’ll try it in my demo. I’ll need to know what version of bootstrap you are using so I can set it up in codepen.