Question

我正在尝试在 Tailwind CSS 中为仪表板实现以下布局。

初始高度将是屏幕尺寸，并且不应超过初始高度。

仪表板的蓝色区域最初将是空的（但即使是空的，它也应该占据整个区域）并且它将开始添加最终将超出指定蓝色区域的信息，当发生这种情况我希望该区域用滚动条在 Y 轴上溢出。我的问题是，当发生溢出时，整个页面都会溢出，而不仅仅是蓝色部分使该列超出屏幕范围。

I created a CodePen with the HTML code that I currently have.

<div class="h-screen bg-black flex flex-col">
  <div class="bg-green-200">NAVBAR</div>
  <div class="bg-blue-200 flex-1">
    <div class="flex h-full">
      <!-- LEFT -->
      <div class="flex-1 bg-yellow-200">
        <div class="flex flex-col h-full">
          <div class="flex-1 bg-blue-800 text-white text-2xl p-8">
            This is the only area that will be growing
            and should eventually overflow displaying
            scrollbars only in the blue area.
            What I'm having problem with is to initially 
            use all the available blue space and then when
            the content overflows not making the whole page
            scrolldown, only this blue section.
            <!-- DIVS HERE SHOULD GROW AND OVERFLOW -->            
            <!-- Uncommenting the following statements will
                show what is my current problem -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
          </div>
          <div class="flex-none bg-red-200 h-32">
            This will always be fixed height
          </div>
          <div class="flex-none bg-red-300 h-20">
            This will always be fixed height
          </div>
        </div>
      </div>
      <!-- //LEFT -->
      <div class="flex-1 bg-yellow-300">MIDDLE</div>
      <div class="flex-1 bg-yellow-400">RIGHT</div>
    </div>
  </div>
  <div class="bg-green-200">
    The Footer should always be visible
  </div>
</div>

任何帮助将不胜感激

Answer 1

我最终设法完成了我想要的，我在这里分享了代码，看来我滥用了溢出属性。有了这个，部分可以增长，而其余部分保持灵活但固定。

<div class="h-screen bg-black flex flex-col">
  <div class="bg-green-200">NAVBAR WORKING</div>
  <div class="bg-black flex flex-col h-full overflow-y-auto">
    <!-- THREE COLUMNS LAYOUT -->
    <div class="flex h-full">
      
      <!-- COLUMN ONE -->
      <div class="flex-1 flex flex-col bg-white">
        
        <div class="flex flex-col bg-red-500 h-full">
          
          <div class="bg-white h-full flex-grow-0 overflow-y-auto">
            <div class="flex flex-col">
              <div class="h-48 bg-black"></div>
              <div class="h-48 bg-red-700"></div>
              <div class="h-48 bg-black"></div>
              <div class="h-48 bg-red-700"></div>
              <div class="h-48 bg-black"></div>
              <div class="h-48 bg-red-700"></div>
              <div class="h-48 bg-black"></div>
              <div class="h-48 bg-red-700"></div>
            </div>
          </div>
          
          <div class="bg-red-200 h-32 flex-none">
            This will always be fixed height
          </div>
          
          <div class="bg-red-300 h-20 flex-none">
            This will always be fixed height
          </div>
          
        </div>
        
      </div>
      <!-- COLUMN ONE -->
      
      <!-- COLUMN TWO -->
      <div class="flex-1 bg-yellow-300">MIDDLE</div>
      <!-- COLUMN TWO -->
      
    </div>
    <!-- THREE COLUMNS LAYOUT -->
  </div>
  <div class="bg-green-200">
    The Footer should always be visible
  </div>
</div>

TailwindCSS 布局中的溢出问题

1 个答案: