Question

I discovered a bug with Chrome version 75's implementation of flexbox.因此，我想查看问题是否与grid一起存在，但是该测试仅在存在与grid类似的flex-grow属性的情况下才有效到我文档的当前结构。

body {
  display: flex;
  flex-direction: column;
}
header {
  /* height is implicitly determined by font-size and padding */
}
main {
  flex: 1;
  scrollbar-width: none;
  overflow-y: auto;
}
::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
}
footer {
  /* height is implicitly determined by font-size and padding */
}

是否有类似的grid属性？

Answer 1

您可以依靠1fr来填充剩余空间：

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin: 0;
  height: 100vh;
}

header {
  padding: 15px;
  font-size: 1rem;
  background: red;
}

main {
  background: green;
  overflow:auto;
  padding:10px;
}

footer {
  padding: 15px;
  font-size: 1rem;
  background: blue;
}

<header>this is a header</header>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean enim nulla, tincidunt at laoreet sed, sodales a arcu. Cras cursus diam eget diam venenatis egestas. Sed in massa pharetra, malesuada felis et, posuere nisl. Etiam eget mauris suscipit, consequat leo in, tincidunt lectus. Morbi pellentesque accumsan lectus sed finibus. Vivamus eros mi, eleifend vitae nibh id, vulputate posuere nulla. Integer dictum justo non nunc tincidunt, lacinia faucibus nisl vestibulum. Mauris luctus ultrices diam, at malesuada sem. Curabitur auctor, mauris in fermentum vestibulum, libero velit molestie leo, ut placerat velit ligula vel mauris. Integer tortor purus, sagittis vel libero sed, egestas vehicula velit. Mauris ullamcorper, arcu at facilisis vehicula, lectus lacus scelerisque felis, ut mattis dolor justo ac tellus.

Fusce porttitor turpis eget felis vestibulum viverra. Sed hendrerit nisl interdum tortor suscipit convallis. Donec aliquet massa sapien, ac congue lacus ullamcorper sed. Donec felis lectus, fermentum ut vestibulum sit amet, mattis ac ipsum. Etiam ut purus libero. Mauris maximus sem at ex posuere, at venenatis nisi sollicitudin. Vestibulum consequat sem risus, vitae sodales augue rutrum venenatis. Vivamus varius, lectus consequa
</main>
<footer>this is a footer</footer>

网格属性类似于Flex-Grow

1 个答案: