Question

我正在尝试在flexbox css中创建一个3 x 3的网格以及固定高度的标头。

我已经做到了，但是我希望总高度为100％。此刻固定高度的标头（例如80px）使我的总高度为100％+ 80px。

如何将所有内容保持在屏幕高度的100％以内？

这是我尝试的代码：

* {border: 0; padding: 0; margin: 0; }
html, body, .grid { height: 100%; width: 100%;}
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: lightgray;
}
.item {
  text-align: center;
  border: 1px solid gray;
}

<div class="header">LOGO</div>
<div class="grid container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>  
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>  
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>  
</div>

Answer 1

将body设置为flexbox列，并将容器flex:1设置为扩展至剩余高度。

* {
  border: 0;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.container {
  display: grid;
  flex: 1;
  grid-template-columns: auto auto auto;
  background-color: lightgray;
}

.item {
  text-align: center;
  border: 1px solid gray;
}

<div class="header">LOGO</div>
<div class="grid container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

Answer 2

将标头放入网格容器中，并使用grid-template-columns和grid-area将其分配到第一行，如下所示：

* {border: 0; padding: 0; margin: 0; }
html, body, .grid { height: 100%; width: 100%;}
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-areas:
      "header header header";
  background-color: lightgray;
}
.header { grid-area: header; }
.item {
  text-align: center;
  border: 1px solid gray;
}

<div class="grid container">
  <div class="header">LOGO</div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>  
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>  
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>  
</div>

Answer 3

期望反馈从未发表过的评论，

这是一个命题（based on this topic about flex），它可以使标题为任意大小，并且在需要时可以溢出网格，而不会干扰标题在屏幕上的位置，您不必担心标题的高度即可放置网格。

代码段显示了布局所需的基本CSS，还演示了可以在不破坏布局基础的情况下添加padding，margin或额外的页脚。

/* basic's of this layout */

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
  overflow: auto;
}

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
}


/* end basic's*/

/* what comes here is only for demo and demonstrate that sizing is not required, flex handles it */


/* see about different height remaing 
and eventually a fixed footer in the way also */

footer {
  display: none;
}


/* see what happen when footer comes in the flow */

main:hover+footer {
  display: block;
}


/* end playing with extra mark up */


/* extra makeup and padding,margin to also alter sizing */

.flex {
  display: flex;
  align-items: center;
}

h1 {
  margin: auto 0.25em;
}

header,
footer {
  margin: 0.5em;
  border: solid;
  padding: 0.5em;
  background: lightblue;
}

.grid {
  grid-gap: 0.5em;
  padding: 0.5em;
}

.item {
  background-color: lightgray;
  border: solid;
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vw;
}

<header class="header flex">LOGO
  <h1> title</h1>
</header>
<main class="grid container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</main>
<footer>is a footer too an option?</footer>

更改CSS网格以包括固定高度的标头

3 个答案: