CSS дополнительный интервал при сгибании содержимого по высоте - PullRequest
Новая
       21

CSS дополнительный интервал при сгибании содержимого по высоте

0 голосов
/ 07 октября 2018

У меня есть flex-wrap div и несколько предметов внутри.Но когда экран становится меньше, рост не может соответствовать их высоте и освободить место внизу.Почему это происходит и как это решить?

explain flexwrap over body height index.html 

<!doctype html>
<html lang="ko" class="bg-orange">
<head>
    ...
</head>
<body>
    <div class="project">
        <div class="prototype-box">
            1
        </div>
        <div class="prototype-box">
            2
        </div>
        <div class="prototype-box">
            3
        </div>
    </div>

style.css 

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #fff;
}

.project {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.prototype-box {
    width: 400px;
    height: 200px;
}

Ответы [ 3 ]

0 голосов
/ 07 октября 2018

старайтесь не трогать тело и вставьте свой гибкий div в div обертки.так что вы можете сделать интервал.Вы можете обратиться к моей ручке здесь. 

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #fff;
}
wrapper{ /* Add this wrapper */
  background-color: #dddddd;
  margin: 10% 0;
}
.project {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* add the code below */
    background-color: red;
    width: 75%;
    margin: 5% auto;
    flex-direction: column;
}

.prototype-box {
  background-color: blue;
  height: 200px;
  /* Add this code */
  width: auto;
  margin: 15px;
}
<body>
  <div class="wrapper"> <!-- Add this wrapper -->
    <div class="project">
        <div class="prototype-box">
            1
        </div>
        <div class="prototype-box">
            2
        </div>
        <div class="prototype-box">
            3
        </div>
    </div>
  </div>
</body>
0 голосов
/ 07 октября 2018

Это происходит потому, что вы сделали body ограниченным по высоте: 100% от html, ограниченным по высоте: 100% экрана.Чтобы это исправить, просто используйте min-height вместо height внутри тела: 

html {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #fff;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  border:1px solid green;
}

.project {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.prototype-box {
  width: 400px;
  height: 200px;
  border:1px solid red;
}
<div class="project">
  <div class="prototype-box">
    1
  </div>
  <div class="prototype-box">
    2
  </div>
  <div class="prototype-box">
    3
  </div>
</div>
0 голосов
/ 07 октября 2018

Вы используете от px до height, что означает абсолют.Так, например, 200 пикселей будет буквально 200 пикселей на любом экране.Поэтому, если высота тела меньше, то по умолчанию будет отображаться 600px (200px+200px+200px) прокрутка (overflow-y) ...

Если вы хотите, чтобы они соответствовали body's height, вам нужно установить %/vh до height

Процент (%): относительно родительского значения.

Высота области просмотра (vh): Размер относительнообласть просмотра (окно браузера, в основном).

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #fff;
}

.project {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.prototype-box {
border: 1px solid black;
    width: 400px;
    height: 32vh;
}
   <div class="project">
        <div class="prototype-box">
            1
        </div>
        <div class="prototype-box">
            2
        </div>
        <div class="prototype-box">
            3
        </div>
    </div>
...