无法使用百分比调整HTML输入框尺寸的技术求助

嘿，我太懂这种跨设备布局崩掉的烦躁感了！咱们一步步来搞定这个问题：

问题根源分析 #

你现在的输入框用了固定高度50px，而且没配置flex布局下的自适应属性；另外如果想让百分比尺寸生效，父元素必须有明确的尺寸参考——比如父级div没设置高度的话，输入框的height: 100%根本起不了作用，这就是你没法用百分比调整尺寸的核心原因。

具体解决方案 #

我给你调整了CSS代码，保证输入框能完美自适应父级div，跨设备也能正常显示：

1. 先修正父级div的CSS

给父级加上明确的高度（或者用flex让它占满上级容器），这样子元素的百分比尺寸才有计算依据：

.div_input_box{
  display: flex;
  justify-content: space-between;
  height: 60px; /* 给父级一个明确高度，根据你的需求调整 */
  /* 如果你的父级本身就在另一个flex容器里，也可以用 flex: 1; 让它自动占满可用空间 */
}

2. 调整输入框的CSS

添加flex自适应属性和盒模型修正，彻底解决尺寸自适应问题：

.input_box{
  height: 100%; /* 现在父级有高度了，百分比高度就能生效 */
  background-color: #F8F8FF;
  margin: 0 0 10px 0;
  padding: 0 0 0 10px;
  flex: 1; /* 关键！让输入框自动填充flex容器的可用宽度 */
  box-sizing: border-box; /* 避免padding撑开输入框，保证尺寸计算准确 */
}

为啥这么改？ #

• flex: 1：在flex容器里，这个属性会让输入框自动占据剩余的可用空间，比手动设置百分比宽度灵活得多，不管父级尺寸怎么变，输入框都能自适应。
• box-sizing: border-box：这个是布局神器！它会把padding和border都算进元素的总宽高里，不会因为加了padding就导致输入框超出父级容器。
• 明确父级高度：只有父级有了确定的高度值，子元素的百分比高度才能正常计算，不然浏览器不知道“100%”到底是多少。

如果你的.div_input_box里还有其他元素（比如提交按钮），justify-content: space-between会自动把它们和输入框分开，输入框依然能完美填充中间的空间。

内容的提问来源于stack exchange，提问作者Lucy