How can I use CSS `calc()` to make an element fill the remaining width of its container?

Efficiently Filling Container Width in CSS

In our HTML markup, we have a header bar containing three elements: an image, a middle element, and a right element. The middle element is intended to occupy the remaining width of the container.

To achieve this, CSS provides a powerful tool: calc(). This function allows for dynamic calculations of lengths based on available space.

The magic lies in the following CSS rule:

<code class="css">#middle {
  width: calc(100% - 100px);
}</code>

In this rule, the #middle element's width is calculated by subtracting the width of the fixed-width #left element (100px) from the total container width (100%). This ensures that the middle element fills the remaining space perfectly.

To summarize, by utilizing calc(), we can dynamically adjust the width of #middle based on the available container space, resulting in an aesthetically pleasing and perfectly aligned header bar.

The above is the detailed content of How can I use CSS `calc()` to make an element fill the remaining width of its container?. For more information, please follow other related articles on the PHP Chinese website!