Блог

Главная - Вопросы по программированию - проблема с контейнером сетки css, когда высота сетки больше, чем высота страницы(устройства)

проблема с контейнером сетки css, когда высота сетки больше, чем высота страницы(устройства)

#css #css-grid

Вопрос:

У меня проблема с css-сеткой , я создаю контейнер с двумя div в нем с помощью css-сетки, и я хочу настроить контейнер в центр страницы. Я использую этот код :

 html{
    width: 100vw;
    height : 100vh;
}
body{
    height : 100%;
}

.container-fluid{
    width:100%;
    height : 100%;
    display:grid;
    grid-template-columns: 300px;
    grid-template-rows: 200px auto;
    justify-content: center;
    align-content: center;
    border:1px solid red;
}

.logo-container{
    background-color: khaki;
}

.form-container{
    height :540px;
    background-color: lightblue;
} 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/media-query.css">
    <title>Login amp; Register User With Profile</title>
</head>
<body>
    <div class="container-fluid">
        <div class="logo-container">
               <h1>Logo</h1>
        </div>
        <div class="form-container">
          <h1>Form</h1>
        </div>
    </div>

    
    <link  rel="stylesheet" href="assets/css/all.css">
</body>
</html>

как вы видите, когда высота контейнера сетки больше высоты страницы, возникает проблема (см. Результат кода).
при использовании высоты для тега тела , переполнении высоты сетки и при удалении высоты из тега тела все в порядке, но в этом случае контейнер не может настроить контейнер в центре страницы.
в чем проблема?

Ответ №1:

Упростите свой код, как показано ниже:

 body {
  margin: 0; /* remove default margin */
}

.container-fluid {
  min-height: 100vh; /* at least screen height */
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: 200px auto;
  justify-content: center;
  align-content: center;
  border: 1px solid red;
  box-sizing:border-box; /* to consider the border inside the height */
}

.logo-container {
  background-color: khaki;
}

.form-container {
  height: 540px;
  background-color: lightblue;
} 
 <div class="container-fluid">
  <div class="logo-container">
    <h1>Logo</h1>
  </div>
  <div class="form-container">
    <h1>Form</h1>
  </div>
</div>

Или как показано ниже:

 body {
  margin: 0;
}

.container-fluid {
  height: 100vh; /* full height */
  display: grid;
  grid-template-columns: 300px;
  /* first row at 200px max-height and second row at 540px max-height */
  grid-template-rows: minmax(auto,200px) minmax(auto,540px); 
  justify-content: center;
  align-content: center;
  border: 1px solid red;
  box-sizing:border-box;
}

.logo-container {
  background-color: khaki;
}

.form-container {
  background-color: lightblue;
} 
 <div class="container-fluid">
  <div class="logo-container">
    <h1>Logo</h1>
  </div>
  <div class="form-container">
    <h1>Form</h1>
  </div>
</div>
Метки: , ,