How to Make a Text Box Span 100% of Its Container Without Overflow?

Controlling 100% Width Text Box Expansion

It is common to desire a text box that spans the entire width of its container. To achieve this, one might apply a style like:

<code class="css">input.wide {
  display: block;
  width: 100%;
}</code>

However, this approach faces a challenge: the width of the text box is defined by its content. Default margins, borders, and padding on the text box cause it to extend beyond the container's boundaries, creating an unsightly gap.

To address this issue, we need a way for the text box to fill the width of its container without exceeding it. One solution is to utilize the CSS3 property box-sizing: border-box. This property redefines the meaning of width to include external padding and border.

Unfortunately, support for box-sizing is not yet universal. Thus, we can include browser-specific fallback values:

<code class="css">input.wide {
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}</code>

As an alternative to using box-sizing, one can manually apply padding-right to the enclosing element, ensuring that it is equal to the expected padding and border.

Both approaches allow one to control the width of a text box while preventing it from spilling over beyond the confines of its container.

The above is the detailed content of How to Make a Text Box Span 100% of Its Container Without Overflow?. For more information, please follow other related articles on the PHP Chinese website!