How Can I Set a Container's Height to a Percentage Minus a Fixed Pixel Value in CSS?-CSS Tutorial-php.cn

How Can I Set a Container's Height to a Percentage Minus a Fixed Pixel Value in CSS?

Susan Sarandon

Release： 2024-12-17 16:19:10

Original

969 people have browsed it

How Can I Set a Container's Height to a Percentage Minus a Fixed Pixel Value in CSS?

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

with a header

and an unordered list (

To achieve this, you can utilize the calc() function:

height: calc(100% - 18px);

Copy after login

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);

Copy after login

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!

source：php.cn

Previous article：Why Isn't My Background Color Changing on Hover? Next article：How Can I Horizontally and Vertically Center Two Elements Inside a Div?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn