How can the height of the table in element be displayed adaptively to the height of the browser window?

The upper part of the

page consists of some form elements, which are used for query conditions, and the lower part is a table, which displays the checked data.
how to make the height of the table adaptive to the height of the browser window?
for example, on the big screen, can the data be displayed, and on the small screen, the excess scrolling display?
now the effect is to scroll the whole page together, but how to scroll only in the table?
is similar to the display effect of table fixed header on the Element official website.

I don"t know if I made myself clear. no, no, no.

Element-ui element css vue.js

Jan.30,2022

1. Give you a portal demo: vue-template
2. That is, there are two scroll bars on the left and right
3. The general idea is to go beyond the display scroll bar on the left and right side during layout. You can view the css layout style

the height of the table that needs to be dynamically calculated. As long as the height of the table is set, it can reach the fixed header

.
const clientHeight = document.documentElement.clientHeight-105 in

/ / store;
/ / references to a single page
clientHeight () {

return this.$store.state.clientHeight - 115;

}
/ / attribute of el-table
: max-height= "clientHeight"

Previous: What if times is escaped when Wechat jssdk is configured to generate a signature?

Next: Write to complete the mailbox suffix program, the up and down arrows can not control the direction