height во всю высоту экрана

#jquery #css #вёрстка

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

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


    

Ответы

Ответ 1

Про 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;
}

  




Ответ 2

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



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