Question

如何在.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>

Answer 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>

CSS网格div高度自动

1 个答案: