reactjs css框布局溢出屏幕高度

3lxsmp7m 于 11个月前发布在 React

关注(0)|答案(1)|浏览(128)

我想要一个像这样的屏幕this image，
height row div，没有溢出，包含：

一个左框，其中包含一列：
具有固定高度20px的标题，
基于剩余高度的纵横方框。
中间条宽度20px的H屏幕，以及
右侧面板也是H型屏幕，并利用顺风占据剩余的屏幕宽度。

我一直在尝试，但董事会总是溢出屏幕高度。这是我尝试的。

<div className="flex h-screen">
      <div className="flex-col">
        <Header/>
        <div className="flex-grow bg-red-500 aspect-square">
         <Board/> 
      </div>
      </div>

      <div className=" flex-initial">
        <ControlBar />
      </div>

      <div className="flex flex-1">
        <div className="w-full flex-grow flex-col justify-between">
          <Panel />
        </div>
      </div>
    </div>

字符串

reactjs

来源：https://stackoverflow.com/questions/77754698/css-box-layout-overflow-the-screen-height

1条答案

按热度按时间

arknldoa1#

下面的代码片段应该是你所追求的。
Tailwind没有内置的类来覆盖与像素值有关的计算高度值，但vanilla CSS做到了：

style="height: calc(100vh - 20px);"

字符串
此样式计算视口的高度，然后动态地从总高度中减去20px。请参阅下面的操作：

<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class="flex h-screen">
    <div class="flex flex-col bg-blue-500">
      <div class="h-20 bg-yellow-300">
        Header
      </div>
      <div class="aspect-square bg-green-300" style="height: calc(100vh - 20px);">
        Aspect Square Box
      </div>
    </div>
      <div class="w-20 bg-gray-400">
        Middle Bar
      </div>
      <div class="flex-1 bg-red-500">
        Right-side Panel
      </div>
  </div>

型
如果有帮助就告诉我。

赞(0）回复(0）举报 11个月前

我来回答

reactjs css框布局溢出屏幕高度

1条答案

相关问题

热门标签

最新问答