在左侧框上对齐全宽搜索栏并设置填充

Question

我需要在页面的左下角放置一个搜索栏，它必须采用全宽，高度为 40px。但是，当我为input设置padding以避免占位符太靠近边框时，搜索框不考虑父框的宽度并占用父框的空间。

代码笔：https://codepen.io/gabrielmlinassi/pen/gObJQQQ?editors=1100

body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.box {
height: 100%;
width: 100%;
}
.box .top {
height: 30%;
width: 100%;
background-color: #cccccc;
}
.box .bottom {
background-color: #ffffff;
height: 70%;
width: 100%;
display: flex;
justify-content: space-between;
}
.box .bottom .left {
background-color: #f7f7f7;
border: solid 1px #cccccc;
border-radius: 8px;
margin-top: -100px;
margin-left: 50px;
width: 59.5%;
height: 100%;
}
.box .bottom .right {
background-color: #f7f7f7;
border: solid 1px #cccccc;
border-radius: 8px;
margin-top: -100px;
margin-left: 15px;
margin-right: 50px;
width: 40%;
height: 100%;
}
.box .bottom .left .search-wrap {
display: flex;
width: 100%;
height: 40px;
}
.box .bottom .left .search-wrap .search-box {
width: 100%;
height: 100%;
margin: 15px;
}
.box .bottom .left .search-box input {
width: 100%;
height: 100%;
padding: 0 15px; 
}

<div class="box">
<div class="top"></div>
<div class="bottom">
<div class="left">
<div class="search-wrap">
<div class="search-box">
<input type="text" placeholder="searh" />
</div>
</div>
</div>
<div class="right"></div>
</div>
</div>

我该如何解决？

Answer 1

添加box-sizing: border-box;以包含 100% 宽度的填充。

body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.box {
height: 100%;
width: 100%;
}
.box .top {
height: 30%;
width: 100%;
background-color: #cccccc;
}
.box .bottom {
background-color: #ffffff;
height: 70%;
width: 100%;
display: flex;
justify-content: space-between;
}
.box .bottom .left {
background-color: #f7f7f7;
border: solid 1px #cccccc;
border-radius: 8px;
margin-top: -100px;
margin-left: 50px;
width: 59.5%;
height: 100%;
}
.box .bottom .right {
background-color: #f7f7f7;
border: solid 1px #cccccc;
border-radius: 8px;
margin-top: -100px;
margin-left: 15px;
margin-right: 50px;
width: 40%;
height: 100%;
}
.box .bottom .left .search-wrap {
display: flex;
width: 100%;
height: 40px;
}
.box .bottom .left .search-wrap .search-box {
width: 100%;
height: 100%;
margin: 15px;
}
.box .bottom .left .search-box input {
width: 100%;
height: 100%;
padding: 0 15px; 
box-sizing: border-box;
}

<div class="box">
<div class="top"></div>
<div class="bottom">
<div class="left">
<div class="search-wrap">
<div class="search-box">
<input type="text" placeholder="searh" />
</div>
</div>
</div>
<div class="right"></div>
</div>
</div>

注意：在大多数情况下，为具有此设置的所有元素添加一般规则很有用，如下所示：

* {
box-sizing: border-box;
}