您可以应用
width
/
height
/
box-sizing
对于不能仅使用定位属性自动调整大小的元素。
.colorPicker * {
/* continued */
width: calc(100% - 10px);
height: calc(100% - 10px);
box-sizing: border-box;
}
.colorPicker {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 2px solid red;
position: relative;
overflow: hidden;
}
.colorPicker * {
display: block;
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
box-sizing: border-box;
}
<p>div is positioned correctly</p>
<div class="colorPicker">
<div style="background: blue"></div>
</div>
<p>'color' input is not sized at all</p>
<div class="colorPicker">
<input type="color" />
</div>
<p>'text' input is too wide</p>
<div class="colorPicker">
<input type="text" />
</div>
<p>'button' input is not wide enough</p>
<div class="colorPicker">
<input type="button" />
</div>
