Height

Element height.

html

<div class="ht-wrap" role="img" aria-label="An element's height set in pixels, percent of its container, or auto to fit content" data-mode="px" style="--hpx:90px;--hpct:90%;">
  <div class="ht-container">
    <div class="ht-box" style="background:#BFD9F2;">box</div>
  </div>
  <p class="ht-caption">height: 90px (container is 200px tall)</p>
</div>
<style>
.ht-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }
.ht-container { height: 200px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; display: flex; }
.ht-box { width: 120px; border-radius: 6px; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; font-weight: 700; }
.ht-wrap[data-mode="px"] .ht-box { height: var(--hpx); }
.ht-wrap[data-mode="%"] .ht-box { height: var(--hpct); }
.ht-wrap[data-mode="auto"] .ht-box { height: auto; padding: 14px 8px; }
.ht-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="ht-tw font-sans text-[#241430] w-[300px]" role="img" aria-label="An element's height set in pixels, percent of its container, or auto to fit content" data-mode="px" style="--hpx:90px;--hpct:90%;">
  <div class="h-[200px] bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border flex">
    <div class="ht-tw-box w-[120px] rounded-md flex items-start justify-center pt-2 font-bold" style="background:#BFD9F2;">box</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">height: 90px (container is 200px tall)</p>
</div>
<style>
.ht-tw[data-mode="px"] .ht-tw-box { height: var(--hpx); }
.ht-tw[data-mode="%"] .ht-tw-box { height: var(--hpct); }
.ht-tw[data-mode="auto"] .ht-tw-box { height: auto; padding-top: 14px; padding-bottom: 14px; }
</style>

react

export function HeightDemo({
  mode = "px",
  value = 90,
  background = "#BFD9F2",
}) {
  const boxHeight = mode === "auto" ? "auto" : `${value}${mode}`;
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 300 }}
      role="img" aria-label="An element's height set in pixels, percent of its container, or auto to fit content">
      <div style={{ height: 200, background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 10, boxSizing: "border-box", display: "flex" }}>
        <div style={{ width: 120, background, borderRadius: 6, display: "flex", alignItems: "flex-start", justifyContent: "center",
          padding: mode === "auto" ? "14px 8px" : "8px 0 0", fontWeight: 700, height: boxHeight }}>
          box
        </div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>height: {value}{mode} (container is 200px tall)</p>
    </div>
  );
}