使网格项消耗已删除的另一个项的空间

时间：2018-01-14 23:31:56

标签： html css css3 css-grid

基本上我需要做的是设置一个网格，但是如果缺少其中一个元素，则另一个元素会拉伸以填充空间。

这是我目前所处位置的示例：

https://codepen.io/Rockster160/pen/JMLaXY

＆＃13;
＆＃13; 
YEAR
＆＃13; 
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  box-sizing: border-box;
}

.grid {
  height: 100%;
  width: 100%;
  background: white;
  border: 2px solid red;
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: 100px auto 50px;
  grid-template-areas: "sidebar header" 
                       "sidebar content"
                       "sidebar footer";
}

.sidebar {
  grid-area: sidebar;
  background: green;
}

.header {
  grid-area: header;
  background: lightblue;
}

.content {
  grid-area: content;
  background: blue;
  border: 5px solid black;
}

.footer {
  grid-area: footer;
  background: orange;
}
＆＃13;
＆＃13;
＆＃13;

<div class="grid"> <div class="sidebar"></div> <div class="header"></div> <div class="content"></div> <!-- <div class="footer"></div> --> </div>是一个可选元素，因此当它不存在时（在代码中注释掉），footer应该伸展并与content的底部对齐

我尝试了使用最小/最大内容和不同sidebar展示位置的各种不同组合，但没有运气。我想如果我有多个名为auto的元素，它可能也会起作用，但也没有运气。

非常感谢任何帮助！

4 个答案:

答案 0 :(得分：2)

您正在强制网格样式中第3行为50px。

将其更改为适应内容，并将50px设置为页脚本身的高度：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  box-sizing: border-box;
}

.grid {
  height: 100%;
  width: 100%;
  background: white;
  border: 2px solid red;
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: 100px auto max-content;   /* changed last 50px to max-content*/
  grid-template-areas: "sidebar header" 
                       "sidebar content"
                       "sidebar footer";
}

.sidebar {
  grid-area: sidebar;
  background: green;
}

.header {
  grid-area: header;
  background: lightblue;
}

.content {
  grid-area: content;
  background: blue;
  border: 5px solid black;
}

.footer {
  grid-area: footer;
  background: orange;
  height: 50px;   /* added */
}
<div class="grid">
  <div class="sidebar"></div>
  <div class="header"></div>
  <div class="content"></div>
  <!--   <div class="footer"></div> -->
</div>

另一个可能性，感谢Michael_B。网格模板行的sintax更清晰：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  box-sizing: border-box;
}

.grid {
  height: 100%;
  width: 100%;
  background: white;
  border: 2px solid red;
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: 100px 1fr auto;   
  grid-template-areas: "sidebar header" 
                       "sidebar content"
                       "sidebar footer";
}

.sidebar {
  grid-area: sidebar;
  background: green;
}

.header {
  grid-area: header;
  background: lightblue;
}

.content {
  grid-area: content;
  background: blue;
  border: 5px solid black;
}

.footer {
  grid-area: footer;
  background: orange;
  height: 50px;   /* added */
}
<div class="grid">
  <div class="sidebar"></div>
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

答案 1 :(得分：1)

最简单的方法是使用:last-child选择器：

.content:last-child {
  grid-row: content / footer;
}


html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  box-sizing: border-box;
}

.grid {
  height: 100%;
  width: 100%;
  background: white;
  border: 2px solid red;
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: 100px auto 50px;
  grid-template-areas: "sidebar header" "sidebar content" "sidebar footer";
  margin-bottom: 2rem;
}

.sidebar {
  grid-area: sidebar;
  background: green;
}

.header {
  grid-area: header;
  background: lightblue;
}

.content {
  grid-area: content;
  background: blue;
  border: 5px solid black;
}

.content:last-child {
  grid-row: content / footer;
}

.footer {
  grid-area: footer;
  background: orange;
}
<div class="grid">
  <div class="sidebar"></div>
  <div class="header"></div>
  <div class="content"></div>
  <!-- <div class="footer"></div> -->
</div>

<div class="grid">
  <div class="sidebar"></div>
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

或者，或者，我们可以颠倒HTML中.content和.footer元素的顺序（如下所示），并使用CSS否定运算符（:not()）来确定.content元素如果前面没有.footer元素，则会占用额外的空间：

:not(.footer) + .content {
  grid-row: content/footer;
}

对.content元素之前没有紧跟.footer兄弟元素的方式设置样式，使其从grid-row标识的content开始，并以grid-row结尾由footer标识的html, body { height: 100%; margin: 0; padding: 0; } div { box-sizing: border-box; } .grid { height: 100%; width: 100%; background: white; border: 2px solid red; display: grid; grid-template-columns: 250px auto; grid-template-rows: 100px auto 50px; grid-template-areas: "sidebar header" "sidebar content" "sidebar footer"; } .sidebar { grid-area: sidebar; background: green; } .header { grid-area: header; background: lightblue; } .content { grid-area: content; background: blue; border: 5px solid black; } :not(.footer)+.content { grid-row: content/footer; } .footer { grid-area: footer; background: orange; }：

<div class="grid">
  <div class="sidebar"></div>
  <div class="header"></div>
  <div class="content"></div>
  <!-- <div class="footer"></div> -->
</div>

<div class="grid">
  <div class="sidebar"></div>
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>
setTimeout

参考文献：

答案 2 :(得分：0)

有时使用flexbox会更简单。

由于您的容器具有已定义的高度（视口），因此您可以使用flex-flow: column wrap创建两列。

然后在内容项上使用flex: 1，告诉它消耗可用空间。

当页脚存在时，内容为其留出空间。当页脚不存在时，内容会消耗所有空间。

.grid {
  display: flex;
  flex-flow: column wrap;
  height: 100vh;
  background: white;
  border: 2px solid red;
}

.sidebar {
  flex: 0 0 100%;
  width: 250px;
  background: green;
}

.header {
  flex: 0 0 100px;
  width: calc(100% - 250px);
  background: lightblue;
}

.content {
  flex: 1;
  width: calc(100% - 250px);
  border: 5px solid black;
  background: blue;
}

.footer {
  flex: 0 0 50px;
  width: calc(100% - 250px);
  background: orange;
}

body { margin: 0; }
div  { box-sizing: border-box; }
<!-- WITH FOOTER -->
<div class="grid">
  <div class="sidebar"></div>
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

<hr>

<!-- WITHOUT FOOTER -->
<div class="grid">
  <div class="sidebar"></div>
  <div class="header"></div>
  <div class="content"></div>
</div>

答案 3 :(得分：-1)

将.grid类更改为

  .grid {
    display: grid;
    grid-template-columns: 250px auto;
    grid-template-rows: 100px auto 50px;
    grid-template-areas:
      "sidebar header"
      "sidebar content"
      "sidebar content";
  }

当您在笔中评论您的页脚标记时，网格仍然在等待在其中设置页脚元素，因此它有点节省空间＆＃34;对于这个元素

相关问题
最新问题