CSS 网格区域的布局不展开且不显示滚动条

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

我有以下 html 和 css 文件。我想要实现的是带有页眉和页脚以及带有 css 网格的菜单栏的标准布局。这看起来效果很好。

现在我想布局内容区域，并且还定义了一个CSS网格，但它有两个问题。

如果子内容（表格）只有很少的条目，那么它不会覆盖其余的可用空间。如果条目太多并且会溢出，则不会显示滚动条。

我以为我所需要的只是一个

align-self: stretch;
overflow-y: auto;

但似乎没有任何效果。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  
    <div class="container">
    
      <div class="menu">
        menu
      </div>
    
      <div class="header">
        header
      </div>
      
      <div class="content">

        <div class="subcontainer">
        
          <div class="subheader">
            subheader
          </div>
          
          <div class="subcontent">
            <table>
              <tr><td>subcontent</td></tr>
              <tr><td>subcontent</td></tr>
              <tr><td>subcontent</td></tr>
              <tr><td>subcontent</td></tr>
              <tr><td>subcontent</td></tr>
              <tr><td>subcontent</td></tr>
              <tr><td>subcontent</td></tr>
              <tr><td>subcontent</td></tr>
              <tr><td>subcontent</td></tr>
              <tr><td>subcontent</td></tr>
              <tr><td>subcontent</td></tr>
              <tr><td>subcontent</td></tr>
              <tr><td>subcontent</td></tr>
            </table>
          </div>
          
          <div class="subfooter">
            subfooter
          </div>
          
        </div>  
        
      </div>
      
      <div class="footer">
        footer
      </div>
      
    </div>
    
  </body>
</html>

和CSS

body {
  margin: 0;
}

.container {
  height: 100vh;
  background-color: lightblue;
  display: grid;
  grid-template:
    [row1-start] "header header" min-content [row1-end]
    [row2-start] "menu content" 1fr [row2-end]
    [row3-start] "footer footer" min-content [row3-end]
    / 100px auto;
}

.menu {
  background-color: blue;
  grid-area: menu;
}

.header {
  background-color: red;
  grid-area: header;
}

.content {
  background-color: yellow;
  grid-area: content;
}

.footer {
  background-color: green;
  grid-area: footer;
}


.subcontainer {
  background-color: lightblue;
  display: grid;
  grid-template:
    [row1-start] "subheader" min-content [row1-end]
    [row2-start] "subcontent" 1fr [row2-end]
    [row3-start] "subfooter" min-content [row3-end]
    / auto;
}

.subheader {
  background-color: purple;
  grid-area: subheader;
}

.subcontent {
  background-color: brown;
  grid-area: subcontent;
  align-self: stretch;
  overflow-y: auto;
}

.subfooter {
  background-color: pink;
  grid-area: subfooter;
}

这说明了第一个问题，子内容没有被拉伸。

这是一张长桌子，它应该保持在其边界内并显示滚动条

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      .container {
        height: 100vh;
        background-color: lightblue;
        display: grid;
        grid-template:
          [row1-start] "header header" min-content [row1-end]
          [row2-start] "menu content" 1fr [row2-end]
          [row3-start] "footer footer" min-content [row3-end]
          / 100px auto;
      }

      .menu {
        background-color: blue;
        grid-area: menu;
      }

      .header {
        background-color: red;
        grid-area: header;
      }

      .content {
        background-color: yellow;
        grid-area: content;
      }

      .footer {
        background-color: green;
        grid-area: footer;
      }

      .subcontainer {
        background-color: lightblue;
        display: grid;
        grid-template:
          [row1-start] "subheader" min-content [row1-end]
          [row2-start] "subcontent" 1fr [row2-end]
          [row3-start] "subfooter" min-content [row3-end]
          / auto;
      }

      .subheader {
        background-color: purple;
        grid-area: subheader;
      }

      .subcontent {
        background-color: brown;
        grid-area: subcontent;
        height: 100px;
        overflow-y: auto;
      }

      .subfooter {
        background-color: pink;
        grid-area: subfooter;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="menu">menu</div>

      <div class="header">header</div>

      <div class="content">
        <div class="subcontainer">
          <div class="subheader">subheader</div>

          <div class="subcontent">
            <table>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
              <tr>
                <td>subcontent</td>
              </tr>
            </table>
          </div>

          <div class="subfooter">subfooter</div>
        </div>
      </div>

      <div class="footer">footer</div>
    </div>
  </body>
</html>

我刚刚运行了你的代码，但没有看到你提到的第一个问题 第二个问题在上面提供的代码中解决了

当表格条目较多时，要使滚动条出现在.subcontent div内部，可以为.subcontent div设置特定的高度，然后使用overflow-y: auto; CSS 属性启用垂直滚动。当 .subcontent div 的内容超过指定高度时，这将在 .subcontent div 内创建一个可滚动区域。调整高度值以满足您的设计要求。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.