CSS 网格滚动行为水平和垂直不一致

Question

我的CSS：

    .header {
    grid-area: header;
    font-family: Arial, sans-serif;
    justify-self: center;   /*horizontal alignment of the grid area*/
    align-self: center;     /*vertical alignment of the grid area*/ }

.container {
    display: grid;
    grid-template-columns: 150px auto;
    grid-template-rows: 30px auto 30px;
    column-gap: 10px;
    row-gap: 10px;
    grid-template-areas: 
    "header header"
    "hmiTree svg"
    "footer footer"; }

.hmiTree {
    grid-area: hmiTree; }

.svg {
    grid-area: svg;
    overflow-x: auto;       /* display scroll-bars if screen becomes too small */
    overflow-y: auto;       /* display scroll-bars if screen becomes too small */ }

.footer {
    grid-area: footer;
    font-family: Arial, sans-serif;    
    align-self: center;     /*vertical alignment of the grid area*/ }

我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript MQTT WebSocket Example</title>
    <link rel="stylesheet" href="HMIStyles.css">
</head>
<body>
    <div class="container">
        <div id="header" class="header">
            <p>SVG HMI</p>
        </div>
        <div id="navigationTree" class="hmiTree">
            <h1>TEXT</h1>
            <h1>TEXT</h1>
            <h1>TEXT</h1>
            <h1>TEXT</h1>
       </div>
        <div class="svg">
            <h1>SOMESVG</h1>
            <h1>SOMESVG</h1>
            <h1>SOMESVG</h1>
            <h1>SOMESVG</h1>
        </div>
        <div id="footer" class="footer">
            <button id="exportTagConfigButton" >Export tag configuration</button>
            <button id="exportConfigButton" >Export configuration</button>
        </div>
    </div>
</body>
</html>

根据我在CSS中设置的网格：当屏幕变得太小时，SVG区域应该得到水平和垂直滚动条。但是：我只得到一个水平滚动条。没有垂直滚动条。我不知道为什么会这样。

Answer 1

包含 SVG 的网格轨道的高度为

auto

，因为您设置了

grid-template-rows: 30px auto 30px

，因此网格高度将随之增长。

您可以在 SVG 容器上设置

contain:size

，使其高度不依赖于其子 SVG 的高度。

.header {
  grid-area: header;
  font-family: Arial, sans-serif;
  justify-self: center;
  align-self: center;
}

.container {
  display: grid;
  grid-template-columns: 150px auto;
  grid-template-rows: 30px auto 30px;
  column-gap: 10px;
  row-gap: 10px;
  grid-template-areas: "header header" "hmiTree svg" "footer footer";
}

.hmiTree {
  grid-area: hmiTree;
}

.svg {
  contain: size;
  grid-area: svg;
  overflow-x: auto;
  overflow-y: auto;
}

.footer {
  grid-area: footer;
  font-family: Arial, sans-serif;
  align-self: center;
  /*vertical alignment of the grid area*/
}

<div class="container">
  <div id="header" class="header">
    <p>SVG HMI</p>
  </div>
  <div id="navigationTree" class="hmiTree">
    <h1>TEXT</h1>
    <h1>TEXT</h1>
    <h1>TEXT</h1>
    <h1>TEXT</h1>
  </div>
  <div class="svg">
    <h1>SOMESVG</h1>
    <h1>SOMESVG</h1>
    <h1>SOMESVG</h1>
    <h1>SOMESVG</h1>
    <h1>SOMESVG</h1>
    <h1>SOMESVG</h1>

  </div>
  <div id="footer" class="footer">
    <button id="exportTagConfigButton">Export tag configuration</button>
    <button id="exportConfigButton">Export configuration</button>
  </div>
</div>

CSS 网格滚动行为水平和垂直不一致

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

1个回答

最新问题

CSS 网格滚动行为水平和垂直不一致

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

1个回答

最新问题

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