为什么我不能使用 React Javascipt 为 CSS 分配百分比值？

Question

我有以下代码，可以在屏幕上绘制条形图组件：

import '../styles/GraphBar.css'

function GraphBar({value, maxLength}) {

     const height = (value / maxLength) * 100 + "%"  
     const style = {height: height}

  return (

    <div className="graph-bar">

        <p className="graph-value">{value}</p>
        <div className="graph-picture" style={style}></div>

    </div>
)}

export default GraphBar

我知道如果我给出以像素为单位的值，程序就可以工作，问题是我需要使用高度的百分比才能使其响应，无论其查看的屏幕大小如何。上面的计算给出了正确的结果，问题是它似乎拒绝解释百分比值，并且代码编译时就好像没有为高度分配值一样，没有显示条形。事实上，即使我将像“70%”这样的随机常量直接写入 style 属性中作为高度值，它仍然拒绝解释它，尽管我到处查看他们都说这正是它应该如何工作。这是什么问题？

Answer 1

问题可能是由于栏的容器元素 (

graph-picture

) 没有定义高度而引起的。在 CSS 中使用基于百分比的高度时，百分比是相对于父容器的高度。如果父容器没有指定高度，则百分比将不会按预期应用。

解决此问题的方法如下：

1. 确保父容器具有定义的高度
   在 CSS 中，为

   .graph-bar

   或任何相关父容器设置特定高度。

   /* GraphBar.css */
   .graph-bar {
       height: 200px; /* or any specific height */
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: flex-end;
   }
   
   .graph-picture {
       width: 100%; /* or whatever width you want for the bar */
       background-color: #4caf50; /* example color */
   }
   

2. 验证 JSX 中的组件结构
   由于您在

   style

   属性中动态设置高度，因此只要使用固定或相对高度定义父容器，该高度就应该有效。

3. 替代解决方案：使用

   vh

   作为相对高度
   如果百分比需要相对于视口而不是父级，请考虑使用

   vh

   单位（视口高度）。

在父容器 (

.graph-bar

) 上定义高度后，

graph-picture

上基于百分比的高度应该正确响应。