How can I make height responsive with the bottom cause when go to mobile or large screen there will be blank under there. The red color line is the gap of blank between the card and tab-bar i want to make it fit with tab-bar
css
#Border{
height: 440px;
width:auto;
}
html
<ion-card id="Border" >
<component v-bind:is="component"/>
</ion-card>
CodePudding user response：
To make an element's height responsive, you can use a combination of the height and min-height CSS properties. The height property sets the fixed height of an element, while the min-height property sets the minimum height of an element, which ensures that the element will always be at least as tall as the specified minimum height, even on smaller screens.
For example, to make the #Border element responsive, you could use the following CSS:
#Border {
height: auto; /* automatically adjust the height based on the content */
min-height: 440px; /* set the minimum height to 440px */
}
You can also use media queries to specify different values for the height and min-height properties at different screen sizes. For example, you could use the following CSS to set the height of the #Border element to 440px on screens with a minimum width of 600px, and to automatically adjust the height based on the content on smaller screens:
#Border {
height: auto; /* automatically adjust the height on small screens */
min-height: 440px; /* set the minimum height to 440px on small screens */
}
@media (min-width: 600px) {
#Border {
height: 440px; /* set the height to 440px on large screens */
min-height: auto; /* don't set a minimum height on large screens */
}
}
Is this a solution you can use?
CodePudding user response：
height: max-content;
height: min-content;
height: fit-content;