登录页中如何使子容器占满父容器宽度并调整高度

你的.forgot-password容器没占满父容器宽度、高度不符合预期的问题，是块级元素默认样式和盒模型的常见小问题，调整一下CSS就能轻松解决：

问题根源拆解 #

• 块级元素默认宽度是auto，但如果父容器带有内边距（padding），直接设置width:100%会超出父容器——因为默认盒模型是content-box，宽度计算不包含padding和border。
• 容器高度默认由内容撑开，所以会显得偏窄小。

修改后的CSS代码 #

.forgot-password {
  color: #848585;
  font-size: 14px;
  background-color: #5967b9;
  /* 强制容器宽度与父容器完全对齐 */
  width: 100%;
  /* 让宽度计算包含padding和border，避免超出父容器 */
  box-sizing: border-box;
  /* 清除浏览器默认margin，消除容器与父容器的间隙 */
  margin: 0;
  /* 通过内边距自然增高容器，同时让文字不紧贴边缘 */
  padding: 1.2rem 1rem;
  /* 可选：若需要固定最小高度，可替换padding使用下面属性 */
  /* min-height: 80px; */
}

关键属性说明 #

• width: 100%：确保容器宽度和父容器完全一致
• box-sizing: border-box：修正盒模型计算逻辑，让容器的宽度包含自身的padding和border，不会超出父容器范围
• margin: 0：清除浏览器给块级元素加的默认margin，保证容器和父容器边缘完全贴合
• padding: 1.2rem 1rem：通过内边距自然提升容器高度，同时优化文字与容器边缘的间距，提升视觉体验

如果父容器.card-container本身带有padding，上面的box-sizing设置会确保.forgot-password完美适配父容器的可用宽度。你也可以根据设计需求，把padding替换成min-height来精准控制容器高度~

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