CSS中textarea无法填满box_3 div问题求助

问题描述 #

我尝试让类名为todo的textarea填满类名为box_3的div，但实际显示效果不符合预期。推测问题与box_3的尺寸及display: grid属性有关，但多次修改CSS均无效。

问题原因 #

1. 父容器container_index仅定义了两行41vh的行轨道，box_3设置的grid-row: 3 / -3没有对应的有效行轨道，导致box_3的高度由内容撑开，而非占满剩余空间。
2. box_3使用place-content: start center会让网格内容在容器内居中对齐，但无法让子元素拉伸填满容器的可用空间。

解决方案 #

修改以下两处CSS代码：

• 给container_index添加第三行轨道，让box_3占满剩余高度；
• 调整box_3的对齐属性，让textarea可以拉伸填满容器。

修改后的完整CSS代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container_index {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 添加第三行，用1fr占满剩余高度 */
    grid-template-rows: 41vh 41vh 1fr;
    /* 确保容器占满视口高度，避免高度不足 */
    min-height: 100vh;
}

.box_1 {
    background-color: blue;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.box_2 {
    background-color: green;
    grid-column: 1 / 3 ;
    grid-row: 2 / 3;
}

.box_3 {
    display: grid;
    grid-row: 3 / 4;
    grid-column: 3 / 4;
    background-color: red;
    /* 让网格项拉伸填满容器 */
    place-items: stretch;
}

.todo {
    width: 100%;
    height: 100%;
    resize: none;
    border: 2px solid blue;
    /* 移除默认内边距，确保完全贴合 */
    padding: 0;
}

代码说明 #

• container_index新增min-height: 100vh确保容器占满整个视口高度，grid-template-rows添加1fr让第三行自动填充剩余空间；
• box_3使用place-items: stretch替代place-content: start center，让网格子元素（textarea）自动拉伸填满容器的宽高；
• 给todo添加padding: 0移除textarea默认的内边距，避免出现空隙。

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