当父div有填充时，如何将子div与父div相匹配？

Question

我已经向<input type=text /> div插入了.searchbox，但由于填充，它从右侧溢出了身体。我该如何解决这个问题？

.searchbox {
    width: 100%;
    height: 40px; 
    background-color:#0099FF;
    padding-left: 20px;
    padding-right: 20px;
}
.inputb {
    width: 100%;
}
@media (max-width: 490px) {
   .searchbox {
        padding-left: 5px;
        padding-right: 5px;
    }
}

HTML：

<div class="searchbox">
    <input class="inputb" type="text" />
</div>

http://jsfiddle.net/brendan34/yLH7L/4/

Answer 1

你可以在css中使用calc函数。谢谢这个http://jsfiddle.net/yLH7L/6/

Answer 2

添加box-sizing：border-box。它为边框框而不是内容框计算宽度。 Fiddle。它的支持是good enough，并且强制旧浏览器进入怪癖模式会使所有元素呈现为边框。 （无论如何，给老浏览器提供非常小的CSS是一个好主意。如果你这样做，怪癖模式不应该破坏太多）

.searchbox {
    box-sizing: border-box;
    width: 100%;
    height: 40px; 
    background-color:#0099FF;
    padding-left: 20px;
    padding-right: 20px;
}

Answer 3

将box-sizing:border-box;添加到您的代码中，并且仅适用于最近的浏览器中的css3

 .searchbox {
            width: 100%;
            height: 40px; 
            background-color:#0099FF;
            padding-left: 20px;
            padding-right: 20px;
            box-sizing:border-box; --- take look a this
        }

如果您需要完整的跨浏览器解决方案，请查看CSS Div width percentage and padding without breaking layout

box-sizing http://css-tricks.com/box-sizing/

的完整说明

Answer 4

试试this。它使用百分比大小。

.searchbox {
    width: 100%;
    height: 40px; 
    background-color:#0099FF;
    padding-left: 2%;
    padding-right: 2%;
}
.inputb {
    width: 98%;
 }
@media (max-width: 490px) {
    .searchbox {
        padding-left: 1%;
        padding-right: 1%;
    }
}

Answer 5

尝试this

.searchbox {
    width: 96%;
    height: 40px;
    background-color:#0099FF;
    padding: 0 2%;
}
.inputb {
    width: 100%;
    margin:0;
    padding:0;
}
@media (max-width: 490px) {
    .searchbox {
        width:94%;
        padding-left: 3%;
        padding-right:3%;
    }
}

Answer 6

使用带有负边距的<div>

对于任何子元素，最大自然宽度不能超过父级内容宽度 - 即使父级已定义box-sizing: border-box。

在典型的块级元素和使用display: block定义的大多数元素上，您可以通过赋予其子边距等于父容器的填充来拉伸子元素。

仅当元素没有定义宽度或明确定义width: auto时才有效。定义width: 100%是不够的。

由于某种原因，即使您已定义input，也无法直接在display: block上完成此操作（这适用于textarea，也可能适用于其他表单元素。）< / p>

我怀疑这是因为width: auto遵循元素的默认浏览器定义宽度，该宽度是为input元素唯一计算的。

然而，您可以将input嵌套在一个没有自己填充的容器中，您也应用了负边距。

请考虑以下示例：

＆＃13;

＆＃13;

* { box-sizing: border-box } /* FTW */
h2 {
    margin: 0;
    padding: 0;
    line-height: 1;
}
.myuncoolparentdiv {
    position: relative;
    margin: 10px;
    padding: 10px 20px;
    background-color:#0099FF;
}
.mycoolparentdiv {
    margin: 0 -20px;
}
.mybadinputtoo {
    display: block;
    width: 100%;
    margin: 0 -20px;
}
.myreluctantinput {
    display: block;
    position: absolute;
    width: 100%;
    right: 0;
    left: 0;
}
.mycoolinput {
    width: 100%;
}
.mycooldiv {
    margin: 0 -20px;
    padding: 3px;
    background-color: tomato;
    border: 1px solid gold;
}
.mybaddiv {
    width: 100%;
    margin: 0 -20px;
    padding: 3px;
    background-color: tomato;
    border: 1px solid gold;
}

＆＃13;

<div class="myuncoolparentdiv">
    <div class="mybaddiv">
        My Bad Div has width: 100%;
    </div>
    <h2>Other Content</h2>
</div>

<div class="myuncoolparentdiv">
    <div class="mycooldiv">
        My Cool Div has no defined width (~ width: auto;)
    </div>
    <h2>Other Content</h2>
</div>

<div class="myuncoolparentdiv">
    <input class="mybadinput" type="text" value="My Bad Input has width: auto;" />
    <h2>Other Content</h2>
</div>

<div class="myuncoolparentdiv">
    <input class="mybadinputtoo" type="text" value="My Bad Input has width: 100%;" />
    <h2>Other Content</h2>
</div>

<div class="myuncoolparentdiv">
    <input class="myreluctantinput" type="text" value="My Reluctant Input has position: absolute;" />
    <h2>Other Content</h2>
</div>

<div class="myuncoolparentdiv">
    <div class="mycoolparentdiv">
        <input class="mycoolinput" type="text" value="My Cool Input has width: 100% and a cool parent div" />
    </div>
    <h2>Other Content</h2>
</div>

＆＃13;

＆＃13;

＆＃13;