Is it possible to dynamically adjust the height of a sticky table header bar in CSS, rather than using JavaScript to compute and apply the height?
While I am aware that CSS variables can fix the height at 50px, I would prefer for the height to be determined based on the content. Any suggestions on how to achieve this?
body {
margin: 0px;
padding: 0px;
}
#container {
display: inline-block;
minimum-height: 100vh;
}
#first_bar {
position: sticky;
left: 0px;
width: 100vw;
background: red;
}
#second_bar {
position: sticky;
top: 0px;
left: 0px;
height: 50px;
width: 100vw;
background: blue;
}
#other_content {
background: grey;
}
#table_header {
position: sticky;
width: 200vw;
top: 50px;
background: yellow;
}
#large_table {
width: 200vw;
height: 200vw;
background: green;
}<div id="container">
<div id="first_bar">navigation</div>
<div id="second_bar">action bar</div>
<div id="other_content">other content</div>
<div id="table_header">table header</div>
<div id="large_table">table</div>
</div>How can I ensure that the table header remains below the action bar as the large table scrolls vertically and other content disappears?