width: 100%-padding?

问题:

I have an html input.

The input has padding: 5px 10px; I want it to be 100% of the parent div\'s width(which is fluid).

However using width: 100%; causes the input to be 100% + 20px how can I get around this?

Example

回答1:

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here\'s a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.

回答2:

This is why we have box-sizing in CSS.

I’ve edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/ All I added was this:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Unfortunately older browsers such as IE7 do not support this. If you’re looking for a solution that works in old IEs, check out the other answers.

回答3:

Use padding in percentages too and remove from the width:

padding: 5%;
width: 90%;

回答4:

You can do it without using box-sizing and not clear solutions like width~=99%.

Demo on jsFiddle:

• Keep input\'s padding and border
• Add to input negative horizontal margin = border-width + horizontal padding
• Add to input\'s wrapper horizontal padding equal to margin from previous step

HTML markup:

<div class=\"input_wrap\">
    <input type=\"text\" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input\'s margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container\'s width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

回答5:

Use css calc()

Super simple and awesome.

input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}​

As seen here: Div width 100% minus fixed amount of pixels
By webvitaly (https://stackoverflow.com/users/713523/webvitaly)
Original source: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

Just copied this over here, because I almost missed it in the other thread.

回答6:

Assuming i\'m in a container with 15px padding, this is what i always use for the inner part:

width:auto;
right:15px;
left:15px;

That will stretch the inner part to whatever width it should be less the 15px either side.

Cheers

Andy

回答7:

You can try some positioning tricks. You can put the input in a div with position: relative and a fixed height, then on the input have position: absolute; left: 0; right: 0;, and any padding you like.

Live example

回答8:

Move the input box\' padding to a wrapper element.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class=\"outer\">
    <div class=\"inner\">
       <input/>
    </div>
</div>

See example here: http://jsfiddle.net/L7wYD/1/

回答9:

Here is the recommendation from codeontrack.com, which has good solution examples:

Instead of setting the width of the div to 100%, set it to auto, and be sure, that the <div> is set to display: block (default for <div>).

回答10:

Just understand the difference between width:auto; and width:100%; Width:auto; will (AUTO)MATICALLY calculate the width in order to fit the exact given with of the wrapping div including the padding. Width 100% expands the width and adds the padding.

回答11:

What about wrapping it in a container. Container shoud have style like:

{
    width:100%;
    border: 10px solid transparent;
}

回答12:

I had the same issue. Fix it like so:

width: 100%;
padding: 5px;
/*--------------Now remove from padding what you\'ve added---------------*/
margin:-5px;

Cheers

回答13:

Try this:

width: 100%;
box-sizing: border-box;

回答14:

You can do this:

width: auto;
padding: 20px;