html - 根据自身内容调整banner高度

我正在使用网格。我有页眉、横幅、内容和页 footer 分。我的问题是我需要根据自己的内容调整横幅高度。我的意思是，如果文本只有一行、三行或任何横幅的高度都应该相应地改变。

我目前遇到的问题是，当我只有一行一行时，它显示正常，但当我有多行时，结果是按钮不在横幅容器中。

我的代码如下:

CSS

.grid {
    display: grid;
    grid-template-rows: 56px 80px auto 80px;
    grid-template-areas:
      "header"
      "banner"
      "content"
      "footer";
    grid-gap: 0;
    width: 100%;
    height: 100vh;
  }

  .grid-header {
    grid-area: header;
    z-index: 100;
  }

  .grid-banner {
    grid-area: banner;
    z-index: 50;
  }

  .grid-content {
    grid-area: content;
    display: grid;
    height: 200px;
    justify-content: center;
  }

  .grid-footer {
    grid-area: footer;
  }

html

.grid {
    display: grid;
    grid-template-rows: 56px 80px auto 80px;
    grid-template-areas:
      "header"
      "banner"
      "content"
      "footer";
    grid-gap: 0;
    width: 100%;
    height: 100vh;
  }

  .grid-header {
    background-color: rgba(255, 255, 0, 0.3);
    grid-area: header;
    z-index: 100;
  }

  .grid-banner {
    background-color: rgba(0, 255, 0, 0.3);
    grid-area: banner;
    max-height: 110px;
    z-index: 50;
  }

  .grid-content {
    background-color: white;
    grid-area: content;
    display: grid;
    height: 200px;
    justify-content: center;
  }

  .grid-footer {
    background-color: rgba(255, 0, 255, 0.3);
    grid-area: footer;
  }

<div class="grid">
<div class="grid-header">
  <div class="header-container">Header</div>
</div>

<div class="grid-banner">Banner</div>

<div class="grid-content">Content</div>

<div class="grid-footer">Footer</div>

有什么想法吗？

最佳答案

grid-banner 类有一个固定的高度。尝试将 grid-template-rows: 56px 80px auto 80px 更改为 grid-template-rows: 56px auto 1fr 80px。

像这样-

.grid {
    display: grid;
    grid-template-rows: 56px auto 1fr 80px;
    grid-template-areas:
      "header"
      "banner"
      "content"
      "footer";
    grid-gap: 0;
    width: 100%;
    height: 100vh;
  }

  .grid-header {
    background-color: rgba(255, 255, 0, 0.3);
    grid-area: header;
    z-index: 100;
  }

  .grid-banner {
    background-color: rgba(0, 255, 0, 0.3);
    grid-area: banner;
    max-height: 110px;
    z-index: 50;
  }

  .grid-content {
    background-color: white;
    grid-area: content;
    display: grid;
    height: 200px;
    justify-content: center;
  }

  .grid-footer {
    background-color: rgba(255, 0, 255, 0.3);
    grid-area: footer;
  }

<div class="grid">
<div class="grid-header">
  <div class="header-container">Header</div>
</div>

<div class="grid-banner">
This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner 
</div>

<div class="grid-content">Content</div>

<div class="grid-footer">Footer</div>

https://stackoverflow.com/questions/63778517/

相关文章：

javascript - 指定列有更新时触发的 OnChange 触发器

python - Python 中 + (pos) 一元运算符的用途是什么？

python - 如何在 Tkinter 应用程序上收听终端？

python - 是否有用于不同范数向量空间之间坐标转换的python算法？

c# - 如何使 flutter 应用程序的 http 获取请求到本地主机？

python - 将多个 swagger 文档(来自不同的应用程序)合并到一个 swagger 仪表

docker - 如何删除 docker 代理设置？

ruby-on-rails - 从哈希数组返回特定值 - JSON

python - 为什么我无法使用 "Send_file"从 Flask 发送图像以使用react

html - 语法高亮器的可访问 HTML 结构