Home >Web Front-end >CSS Tutorial >How Can I Set a Container's Height to a Percentage Minus a Fixed Pixel Value in CSS?
How Can I Set a Container's Height to a Percentage Minus a Fixed Pixel Value in CSS?
- Susan SarandonOriginal
- 2024-12-17 16:19:10966browse
Setting Container Height as a Percentage Minus a Fixed Value
In order to maintain consistency across your website and reduce unnecessary styling, reusable CSS classes can be beneficial. However, you may encounter challenges when standardizing certain elements, such as setting the height of a container element as a percentage of its parent container minus a specific pixel value.
You have a container
- ) inside it. While the header's height is fixed at 18px, the height of the list should dynamically adjust to fill the remaining space within the container. The issue arises when you need to specify the list's height as "100% minus 18px."
To achieve this, you can utilize the calc() function:
height: calc(100% - 18px);
This function allows you to perform mathematical calculations within CSS. In this case, it subtracts 18px from 100% to determine the height of the list.
Note that for older browsers that do not support the CSS3 calc() function, you may need to implement vendor-specific versions as well:
/* Firefox */ height: -moz-calc(100% - 18px); /* WebKit */ height: -webkit-calc(100% - 18px); /* Opera */ height: -o-calc(100% - 18px); /* Standard */ height: calc(100% - 18px);
The above is the detailed content of How Can I Set a Container's Height to a Percentage Minus a Fixed Pixel Value in CSS?. For more information, please follow other related articles on the PHP Chinese website!