How to make an element width: 100% minus padding?
I have an html input.
The input h开发者_JAVA技巧as 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
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.
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.
Use padding in percentages too and remove from the width:
padding: 5%; width: 90%;
You can do it without using box-sizing
and not clear solutions like width~=99%
.
Demo on jsFiddle:
- Keep input's
padding
andborder
- Add to input negative horizontal
margin
=border-width
+horizontal padding
- Add to input's wrapper horizontal
padding
equal tomargin
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 */
}
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.
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.
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>
).
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
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/
Maybe browsers have changed since this question was last answered, but this is the only thing that has ever worked reliably for me to accomplish this:
width: auto;
left: 0;
right: 0;
Then you can make the margins / padding anything you want and the element will not expand past its available width.
This is similar to @andology's answer from way back but if you make left/right both 0 then you can make margin
and/or padding
whatever you want. So this is always my default div
.
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.
What about wrapping it in a container. Container shoud have style like:
{
width:100%;
border: 10px solid transparent;
}
Try this:
width: 100%;
box-sizing: border-box;
For me, using margin:15px;padding:10px 0 15px 23px;width:100%
, the result was this:
The solution for me was to use width:auto
instead of width:100%
. My new code was:
margin:15px;padding:10px 0 15px 23px;width:auto
. Then the element aligned properly:
You can do this:
width: auto;
padding: 20px;
精彩评论