CSS grid divs height auto

问题描述 投票:1回答:1

我怎么能在.text.img div上有高度自动而不是高度100%?

* {
  margin: 0px;
  padding: 0px;
}

html,
body,
.start {
  height: 100%;
}

.header {
  height: 80px;
  background: blue;
}

.slider {
  height: calc(100% - 80px);
  background: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1;
  grid-template-areas: "text img";
}

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

.img {
  grid-area: img;
  background: yellow;
}

@media screen and (max-width: 768px) {
  .slider {
    grid-template-areas: "text text" "img img";
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="a.css">
</head>

<body>

  <div class="start">
    <header class="header">
      <h2>hola</h2>
    </header>
    <div class="slider">
      <div class="text">
        <h1>titulo</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
      </div>
      <div class="img">
        <h1>titulo</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
      </div>
    </div>
  </div>
</body>

</html>
html css css3 css-grid
1个回答
1
投票

编辑

在网格周围添加容器以允许背景样式。


只需删除.slider元素上的height属性即可。 .img和.text元素占用剩余空间以填充额外空间。

* {
  margin: 0px;
  padding: 0px;
}

html,
body,
.start {
  height: 100%;
}

.header {
  height: 80px;
  background: blue;
}

.body-background {
  height: calc(100% - 80px);
  /* apply background here */
}

.slider {
  background: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "text img";
}

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

.img {
  grid-area: img;
  background: yellow;
}

@media screen and (max-width: 768px) {
  .slider {
    grid-template-areas: "text text" "img img";
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="a.css">
</head>

<body>

  <div class="start">
    <header class="header">
      <h2>hola</h2>
    </header>
    <div class="body-background">
      <div class="slider">
        <div class="text">
          <h1>titulo</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
        </div>
        <div class="img">
          <h1>titulo</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
© www.soinside.com 2019 - 2024. All rights reserved.