How to keep the text at the bottom while the input box height increases?

Tips for keeping input box text aligned at all times

In web development, dynamically adjusting the height of the input box and keeping the bottom of the text aligned is a common problem. Although it can be achieved simply using padding, it is not effective when the height changes. This article introduces a more reliable approach to solving this problem using containers and absolute positioning.

Let's look at an example:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  input {
    height: 60px; /* 初始高度 */
    border: none; /* 隐藏默认边框 */
  }
  .input-container {
    border: 1px solid #ccc; /* 为容器添加边框 */
    position: relative; /* 启用相对定位 */
  }
  .input-container input {
    position: absolute; /* 将输入框设置为绝对定位 */
    bottom: 0; /* 将输入框底部固定在容器底部 */
    left: 0; /* 将输入框左端固定在容器左端 */
    width: 100%; /* 确保输入框占据容器的全部宽度 */
  }
</style>
<div class="input-container">
  <input type="text" placeholder="在此输入文本">
</div>

In this example, we create a div container called input-container and set its relative positioning. Then, hide the default border of the input box and set it to absolute positioning and pin it to the bottom of the container via bottom: 0; property. This way, the text content will always remain at the bottom regardless of the height of the input box. The border of the container provides a visual border effect. This method is more flexible and easier to maintain than simply using padding. Hope this method can effectively solve your problem.

The above is the detailed content of How to keep the text at the bottom while the input box height increases?. For more information, please follow other related articles on the PHP Chinese website!