Я пытаюсь выровнять содержимое по центру гибкого блока (по вертикали и горизонтали). В моем примере это работает до тех пор, пока экран достаточно большой.
Проблемы:
- Когда содержимое больше 100vh в классе ".wrapper". Содержание будет обрезано сверху.
- Когда я устанавливаю «.wrapper» в «100vh» и добавляю «.header» div, этот div должен быть исключен из «100vh», иначе я получит полосу прокрутки ни за что.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>FlexBox</title>
<meta name="infoription" content="">
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f8f9fa;
font-family: Roboto,Helvetica,Arial,Lucida,sans-serif;
color: #55595c;
}
.wrapper {
display: flex;
justify-content: center;
align-content: center;
height: 100vh;
flex-wrap: wrap;
}
.content {
background-color: #ffffff;
max-height: 350px;
max-width: 300px;
min-height: 350px;
min-width: 300px;
margin: 10px;
position: relative;
border: 1px solid #dfdfdf;
border-radius: 0.25rem;
}
.content:after {
/* background: none repeat scroll 0 0 transparent; */
bottom: 0;
content: "";
display: block;
height: 10px;
left: 50%;
position: absolute;
background: #55595c;
transition: width 0.4s ease 0s, left 0.4s ease 0s;
width: 0;
}
.content:hover:after {
width: 100%;
left: 0;
}
.thumb {
background-color: #55595c;
height: 150px;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.info {
padding: 10px;
text-align: justify;
}
/* Responsive layout - screen is bigger than 1000px wide */
@media (min-width: 1000px) {
.bodysize {
width: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div class="bodysize">
<div class="header">
<h1>Example Page</h1>
</div>
<div class="wrapper">
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[1]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[2]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[3]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[4]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[5]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[6]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[7]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[8]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[9]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Примеры изображений:
Задача 1 - полоса прокрутки из-за "height: 100vh;".
Задача 2 - содержимое всплывает из верхней части браузера. также из-за "height: 100vh;".
Вопросы:
1) Как установить высоту Dynami c, чтобы обертка всегда заполняла остальную часть доступное пространство?
2) Если содержимое меньше высоты оболочки, его следует отцентрировать по вертикали, но если содержимое больше, центр не нужен.
Есть идеи, как это исправить? ?
>>> РЕШЕНИЕ <<< </strong>
Я добавил .bodysize, удалил высоту из оболочки и добавил «flex-grow: 1» в оболочку , .bodysize {display: flex; flex-flow: колонка; высота: 100vh; }