Relative元素h-full类失效：子div无法填充父容器高度

问题场景 #

尝试让内层div填充其父容器高度，但使用Tailwind的h-full类无效，改用min-h相关类也没有效果。

相关代码 #

JSX代码 #

<div className='flex justify-center items-center'>
  <div
    className='w-[700px] h-full border-none rounded-md relative'
    style={{
      padding: `${framePadding}px`,
      background: `${frameBg.startsWith('#') ? frameBg : '#' + frameBg}`,
    }}
  >
    <textarea
      ref={inputRef}
      placeholder='Enter HTML Source Code'
      id='editing'
      spellCheck='false'
      onInput={() => {
        onCodeChange(inputRef.current.value)
        sync_scroll(inputRef.current)
      }}
      onScroll={() => sync_scroll(inputRef.current)}
      onKeyDown={(event) => check_tab(inputRef.current, event)}
    ></textarea>
    <pre id='highlighting' aria-hidden='true'>
      <code className='language-html' id='highlighting-content'></code>
    </pre>
  </div>
</div>

CSS代码 #

#highlighting {
  margin: 10px;
  padding: 10px;
  border: 0;
  width: -webkit-fill-available;
  max-width: 700px;
  height: 150px;
}
#editing,
#highlighting {
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* Move the textarea in front of the result */

#editing {
  z-index: 1;
}
#highlighting {
  z-index: 0;
}

#editing {
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}

/* Can be scrolled */
#editing,
#highlighting {
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}

效果对比 #

• 预期：内层div和编辑器区域填满父容器竖向空间，占用可用高度
• 实际：编辑器区域高度固定为150px，内层div未填满父容器高度

解决步骤 #

1. 给外层flex容器设置明确高度
   Tailwind的h-full需要父元素有明确高度值才能生效，给外层flex容器添加高度类，比如h-screen（占满视口高度），或根据布局需求设置h-[calc(100vh-80px)]（扣除顶部导航等高度）：

   <div className='flex justify-center items-center h-screen'>
   

2. 移除固定高度，让编辑器区域继承父容器高度
   删除#highlighting中的height:150px，改为height:100%，同时添加box-sizing: border-box避免padding/margin撑大元素：

   #highlighting {
     margin: 10px;
     padding: 10px;
     border: 0;
     width: -webkit-fill-available;
     max-width: 700px;
     height: 100%;
     box-sizing: border-box;
   }
   

3. 让textarea填满父容器
   给#editing添加height:100%和width:100%，同步设置box-sizing:border-box，并调整padding与#highlighting保持一致：

   #editing {
     color: transparent;
     background: transparent;
     caret-color: white;
     height: 100%;
     width: 100%;
     box-sizing: border-box;
     margin: 0;
     padding: 10px;
   }
   

4. 确保relative父容器高度正确传递
   内层带relative类的div已设置h-full，在外层容器有明确高度后，它会自动填充父容器，作为绝对定位元素的参考容器。

调整后代码示例 #

优化后的JSX #

<div className='flex justify-center items-center h-screen'>
  <div
    className='w-[700px] h-full border-none rounded-md relative'
    style={{
      padding: `${framePadding}px`,
      background: `${frameBg.startsWith('#') ? frameBg : '#' + frameBg}`,
      boxSizing: 'border-box'
    }}
  >
    <textarea
      ref={inputRef}
      placeholder='Enter HTML Source Code'
      id='editing'
      spellCheck='false'
      onInput={() => {
        onCodeChange(inputRef.current.value)
        sync_scroll(inputRef.current)
      }}
      onScroll={() => sync_scroll(inputRef.current)}
      onKeyDown={(event) => check_tab(inputRef.current, event)}
    ></textarea>
    <pre id='highlighting' aria-hidden='true'>
      <code className='language-html' id='highlighting-content'></code>
    </pre>
  </div>
</div>

优化后的CSS #

#highlighting {
  margin: 10px;
  padding: 10px;
  border: 0;
  width: -webkit-fill-available;
  max-width: 700px;
  height: 100%;
  box-sizing: border-box;
}
#editing,
#highlighting {
  position: absolute;
  top: 0;
  left: 0;
}

#editing {
  z-index: 1;
}
#highlighting {
  z-index: 0;
}

#editing {
  color: transparent;
  background: transparent;
  caret-color: white;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
}

#editing,
#highlighting {
  overflow: auto;
  white-space: nowrap;
}

内容的提问来源于stack exchange，提问作者Wasimul Vari Khan