图像从网格和尺寸问题中消失答案

【问题标题】：image goes out from grid and sizing issue图像从网格和尺寸问题中消失
【发布时间】：2021-09-25 20:56:44
【问题描述】：

我对编码很陌生，我正在尝试使用网格。但我有点卡住了。我有以下 codePan 项目：

* {
  box-sizing:border-box
}
body {
  height:100vh;
  width: 100%;
  background-color: red;
  padding:0;
  margin:0;
}
#wrapper {
  background-color:blue;
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  display: grid;
  grid-template-areas:
    "nav"
    "content"
    "footer" ;
  grid-template-columns: 1fr;
  grid-template-rows: .8fr 1fr .8fr ;
}
#nav {
  background-color: yellow;
  grid-area: "nav";
    position: sticky; 
    top: 0;
}
#content {
  background-color: pink;
  grid-area: "nav";
  display:flex;
  flex-direction: column;
}
footer {
  background-color: brown;
  grid-area: "nav";
}
#box1 {
  background-color:purple;
  height:50%;
}
#box2 {
  background-color: blue;
  height:60%;
  display:flex;
  flex-direction: column;
}
.image {
  height: auto;
  width: 400px;
  position: relative;
  top:-150px; 
}
button {
    height: 90px;
    width: 400px;
    background-color: #262A58;
    color: white;
    font-size: 1.5em;
    font-family: 'EightOne';
    border-radius: 10px;
    border-style: none;
    cursor: pointer;
      
}

<div id="wrapper">
   <div id="nav"> nav </div>
   <div id="content">
     <div id="box1"> 
        <h1>flower</h1>
     </div>
     <div id="box2">
       <img class="image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.goldpetal.net%2Fmedia%2Fimages%2Fproduct_gallery%2FGerbera_Flower_12.jpg&f=1&nofb=1" alt="">
       <button> buy flower </button>
     </div>
   </div>
  <footer>
    footer
  </footer>

</div>

我想要的是与这张图片类似的东西： picture

不幸的是，我无法定位 Box2 中的内容，因为按钮完全从网格中熄灭。我尝试了几个选项，但最后总是与 Box2 中的内容有些问题。

如果有人可以给我一个建议。可能我使用错误的方式网格...

谢谢！

【问题讨论】：

这是许多其他可能性中的一个可能示例：jsfiddle.net/zyju7wbq（网格是 3x3 到中心中间列）

标签： css flexbox grid

【解决方案1】：

网格并没有真正用于制作完整的网页。所有东西都会自动堆叠在一起，并且不应该有固定的高度。高度应根据内容改变。

【讨论】：

【解决方案2】：

让您的网格定义区域的大小，并使用 Flexbox 来布置您的内容。

您完全可以使用 CSS Grid 实现这种布局。该按钮溢出其内容区域，因为#box2 具有content 网格区域的固定高度60%，但您的.image 和button 比这更高。基本上你的图像按下按钮。

您不需要在内容上设置明确的高度，因为网格已经处理好了。

白蓝背景有点棘手，因为它与图像的边缘不完全对齐。但是您可以通过内容容器上的背景渐变来实现这种效果。

查看这个可行的解决方案作为灵感：

body {
  height: 100vh;
  padding: 0;
  margin: 0;
}
#wrapper {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas:
    'nav'
    'content'
    'footer';
  grid-template-columns: 1fr;
  grid-template-rows: 64px 1fr 96px;
}
#nav {
  grid-area: nav;
  position: sticky;
  top: 0;
  background-color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
#content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(to bottom, transparent 60%, #aad 60%);
  align-items: center;
  padding: 32px;
}

#content .wrapper {
  display: flex;
  flex-direction: column;
  width: 400px;
}
footer {
  grid-area: footer;
}
.image {
  border: solid 16px #aad;
  margin: 16px;
}
button {
  padding: 8px 16px;
  background-color: #262a58;
  color: white;
  font-size: 1.5em;
  font-family: 'EightOne';
  border-radius: 10px;
  border-style: none;
  cursor: pointer;
  margin-top: 32px;
  align-self: center;
}

<div id="wrapper">
  <div id="nav">nav</div>
  <div id="content">
    <div class="wrapper">
      <h1>flower</h1>
      <img
        class="image"
        src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.goldpetal.net%2Fmedia%2Fimages%2Fproduct_gallery%2FGerbera_Flower_12.jpg&f=1&nofb=1"
        alt="Flower"
      />
      <button>buy flower</button>
    </div>
  </div>
  <footer>footer</footer>
</div>

【讨论】：