I am working with Vue and have a fixed height div container with overflow set to hidden. My goal is to iterate through a JavaScript array, adding each item to the div, and stopping when the bottom of the div space is reached. Additionally, I need this solution to be responsive.
<div class="container">
<div class="header">Header</div>
<div class="body" v-for="item in items">
<div>{{ item.data }}</div>
</div>
<div class="footer">Footer</div>
</div>
.container {
display: flex;
height: 100%;
flex-direction: column;
}
.header {
height: 100px;
}
.footer {
height: 100px;
}
.body {
flex: 1;
overflow: hidden;
}
To achieve this, you may need to calculate the height of the container in pixels and divide it by the font height of your item data. The number of items displayed should change when the window is resized to maintain responsiveness.