如何改变滚动条的高度？

Question

这是我的顺风滚动条，我想改变它的高度我该怎么做？下图显示了它的高度。我不能改变 sm:h-96 你能给我一个改变高度的方法吗？

 {/** Chat Scroll View */}
  <div class=" text-gray-500 bg-white rounded-lg border w-full max-w-xl sm:h-96 p-4 overflow-y-scroll scrollbar border-solid border-2 border-red-500">
    <div class="space-y-1">
      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/300"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-green-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Ryann Remo</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
          <div>
            <small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
              23
            </small>
          </div>
        </div>
      </div>

      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/300"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-green-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Ryann Remo</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
          <div>
            <small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
              23
            </small>
          </div>
        </div>
      </div>

      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/500"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Karp Bonolo</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
          <div>
            <small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
              10
            </small>
          </div>
        </div>
      </div>

      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/500"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Karp Bonolo</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
          <div>
            <small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
              10
            </small>
          </div>
        </div>
      </div>

      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md border-l-4 border-red-500">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/200"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Mercedes Yemelyan</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
        </div>
      </div>

      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/600"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Cadi Kajetán</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
        </div>
      </div>

      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/650"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Rina Samuel</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
        </div>
      </div>
    </div>
  </div>
  {/** Chat Scroll View */}

Answer 1

如果您想根据自己的喜好更改高度，您可以使用 arbitrary value，例如 h-[120px] 或 h-[30rem] 或 h-[180px]。你可以根据你想要的高度更改方括号内的值。

您可以在此处的 tailwind 文档中了解有关任意值的更多信息： https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

如何改变滚动条的高度？

How to change a scroll bar height?

javascript

scroll

tailwind-css