5

Подскажите, есть ли возможность на css сделать следующее: задать для контейнера max-height, а внутренний блок чтобы был height:100% относительно контейнера. При этом контейнер всегда был в центре по вертикали.

Верстаю такое:

введите сюда описание изображения

1
  • Что-то тут не то...
    – Qwertiy
    15 мар 2017 в 17:30

2 ответа 2

7

Про FlexBox: на русском и английском

Поддержка FlexBox caniuse.com


А также рекомендую прочесть про vw и vh

www.w3.org

css-tricks.com viewport-sized-typography

Поддержка caniuse.com


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
.content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  /*width: 100vw;*/
  /*height: 100vh;*/
  min-height: 450px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.content .block {
  width: 80%;
  height: 80%;
  background-color: #ffc0cb;
}
<div class="content">
  <div class="block"></div>
</div>

6

Попробуйте через position: absolute; и transform: translate(-50%, -50%);

.div {
  width: 500px;
  height: 80%;
  background: #555;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="div"></div>

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.