Блог

Главная - Вопросы по программированию - CSS сетка автоматически изменяет высоту разделов

CSS сетка автоматически изменяет высоту разделов

#html #css #css-grid

#HTML #css #css-grid

Вопрос:

Как я могу сделать, чтобы высота была автоматической для .text и .img разделений, а не для высоты 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>

Комментарии:

1. align-items: flex-start; ?

2. Я начинаю с flex, ty <3, но не работает на устройствах с разрешением <768 пикселей

3. используйте align-content: flex-start; затем

Ответ №1:

Редактировать

Добавлен контейнер вокруг сетки для обеспечения стилизации фона.

Просто удалите свойство height в вашем элементе .slider. Элементы .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>

Комментарии:

1. Я хочу поместить фоновое изображение на 100%

2. вы хотите, чтобы фоновое изображение покрывало всю страницу или только содержимое под заголовком?

3. меньше 100%-80 пикселей