Can a div take up all remaining screen space

Topic: Can a div take up all remaining screen space

ashleyww93 free asked 7 years ago

Hi.

I'm hoping this is an easy one, I have a table that will have 100's of rows, however, I need to make it that the page doesn't scroll.

I came up with this:

.table-wrapper {
 display: block;
 max-height: 250px;
 overflow-y: auto;
 -ms-overflow-style: -ms-autohiding-scrollbar;
}

This works fine, however since this will be used on tablets with screen resolutions that very a lot setting a max height with pixels isn't an option. This table will be at the bottom of the page and I need it to take up 100% of the remaining space (minus a little bit of padding).

Because of the screen resolution changes, I can't use calc() because I don't know how much space the elements above are taking up.

A screenshot of how it looks without the table wrapper: https://imgur.com/a/CK6JZ
A screenshot of how it looks with the table wrapper: https://imgur.com/a/kQIyx

With the table wrapper, you can see that it becomes scrollable (with touchscreen anyway) but I just need it to fill the remaining white space.

Any suggestions for this?

Add comment

Mikołaj Smoleński staff answered 7 years ago

0 0 Best answer

Hi, I suggest to put Your top part in div with height of 50vh and bottom part in div with same height. It should like like this:

.top {
 height: 50vh;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 30px;
 }
 .bottom {
 height: 50vh;
 max-height: 50vh;
 background: #efefef;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 .table-half {
 max-height: 50vh;
 overflow-y: auto;
 display: block;
 width: 200px;
 background: #fff;
 }

Regards

ashleyww93 free commented 7 years ago

The problem with this, is because it's responsive the top "height" will change to allow the content to fit the width of the screen.

Mikołaj Smoleński staff commented 7 years ago

You can also try to fix Your problem using flexbox. Here is the fiddle specially prepared for You: https://jsfiddle.net/mattonit/b2o0d78x/

ashleyww93 free commented 7 years ago

Hi. That's looks good! However it does still have some problem, see this fiddle: https://jsfiddle.net/jpm8nte6/2/ The content I place in the bottom flex box grows forever and doesn't become scrollable

Mikołaj Smoleński staff commented 7 years ago

Try to change it like this: .wrapper { display:flex; flex-direction:column; min-height:100vh; max-height:100vh; overflow: hidden; justify-content: space-between; } .up { background: crimson; flex:0 1 auto; } .down { flex:1 1 auto; background: royalblue; overflow-y: scroll; }

ashleyww93 free commented 7 years ago

Perfect! Thanks!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

ashleyww93

47Support score
7Questions 9Answers 0Snippets