我如何创建一个占据所有可用空间但不溢出的div？

问题描述 投票：0回答：1

我正在尝试为个人应用程序构建一个小型管理仪表板，但我不知道如何确保页面本身现在可以溢出，而是内部的元素可以溢出。

这是我想要开始工作的示例代码：

<body>
  <div class="h-screen w-screen bg-teal-100 flex overflow-hidden">
    <!-- Toolbar with a fixed width -->
    <div class="h-full bg-blue-50" style="width: 100px;">Toolbar</div>

    <!-- Container for Sidebar and Content 1, taking up the remaining width -->
    <div class="flex-grow h-full bg-orange-50 flex">
      <!-- Sidebar with a fixed width -->
      <div class="bg-purple-50" style="width: 200px;">Sidebar</div>

      <!-- Content 1 taking the remaining space -->
      <div class="flex-grow h-full bg-indigo-500 flex flex-col">
        <div class="bg-green-50">A</div>
        <div class="bg-purple-50">B</div>
        <div class="flex-grow bg-teal-200 flex flex-col">
          <div class="bg-green-50">Header</div>

          <!-- Table div with growing and scrolling capability -->
          <div class="flex-grow bg-red-200 overflow-auto">
            <!-- Oversized content to demonstrate scrolling -->
            <div class="w-[200vw] h-[200vh] text-white">
              H (large content here to activate scrolling)
            </div>
          </div>

          <div class="bg-purple-50">Footer</div>
        </div>
      </div>
    </div>
  </div>
</body>

我想要实现的是拥有一张桌子：

 <div class="w-[200vw] h-[200vh] text-white">
              H (large content here to activate scrolling)
 </div>

如果表格溢出，我只会得到该表格的滚动条。这让我发疯

html css tailwind-css
1个回答
0
投票

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Admin Dashboard</title>
      <style>
        body {
          margin: 0;
        }
      </style>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    </head>
    <body>
      <div class="h-screen w-screen bg-teal-100 flex overflow-hidden">
        <!-- Toolbar with a fixed width -->
        <div class="h-full bg-blue-50" style="width: 100px;">Toolbar</div>
    
        <!-- Container for Sidebar and Content 1, taking up the remaining width -->
        <div class="flex-grow h-full bg-orange-50 flex">
          <!-- Sidebar with a fixed width -->
          <div class="bg-purple-50" style="width: 200px;">Sidebar</div>
    
          <!-- Content 1 taking the remaining space -->
          <div class="flex-grow h-full bg-indigo-500 flex flex-col">
            <div class="bg-green-50">A</div>
            <div class="bg-purple-50">B</div>
            <div class="flex-grow bg-teal-200 flex flex-col">
              <div class="bg-green-50">Header</div>
    
              <!-- Table div with growing and scrolling capability -->
              <div class="flex-grow bg-red-200 overflow-auto">
                <!-- Oversized content to demonstrate scrolling -->
                <div class="w-[200vw] h-[200vh] text-white">
                  H (large content here to activate scrolling)
                </div>
              </div>
    
              <div class="bg-purple-50">Footer</div>
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>

说明：

  1. 主体和容器设置：主容器上的
    h-screen w-screen
    确保容器占据视口的完整高度和宽度。
  2. 溢出处理：主容器上的
    overflow-hidden
    会阻止页面本身滚动。
  3. 固定宽度：工具栏和侧边栏使用内联样式具有固定宽度。
  4. 灵活的内容区域：
    flex-grow
    类确保剩余空间由内容区域使用，
    flex
    确保布局保持灵活。
  5. 表格容器上的滚动处理：包含超大表格内容（
    overflow-auto
    ）的div上的
    w-[200vw] h-[200vh]
    确保当内容溢出时只有该div会滚动。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.