How Can I Set an Element's Height to 100% Minus a Fixed Pixel Value?

Percentage-Based Height Minus Pixels for Optimal Element Sizing

Enhancing website consistency and reducing code clutter through reusable CSS classes is a commendable endeavor. When dealing with containers with fluid content, it becomes necessary to determine how to set the height of specific elements. This article addresses a common scenario.

Consider a container div with a header div and an unordered list. The goal is to assign the remaining height within the container to the list, excluding the header's fixed height of 18px.

To achieve this, CSS offers the calc() function, which allows for dynamic calculations within style rules:

height: calc(100% - 18px);

This expression assigns the list a height equal to 100% of the container, excluding the 18px header height.

However, some older browsers may not support the calc() function. In such cases, consider using vendor-specific implementations:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

By effectively combining percentages and fixed values using the calc() function, you can fine-tune element sizing, ensure consistency, and enhance the overall user experience on your website.

The above is the detailed content of How Can I Set an Element's Height to 100% Minus a Fixed Pixel Value?. For more information, please follow other related articles on the PHP Chinese website!