Этот код делает квадрат полностью отзывчивым.
http://jsfiddle.net/9ow3ymfz/
Как мне достичь той же цели с помощью прямоугольника?
I пытаюсь использовать CSS, чтобы сделать прямоугольник полностью видимым, если высота экрана меньше высоты прямоугольника без необходимости прокрутки.
Приведенный ниже код отлично работает с экранами различной ширины, но если высота недостаточно высока, прямоугольник не сжимается в размере, как требуется, но создает область для прокрутки.
Как избавиться от необходимости прокрутки с небольшой высотой экрана, чтобы весь прямоугольник состоит из квадратов вписывается во всю область экрана без необходимости прокрутки?
Спасибо и надеюсь на вашу помощь.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Golden Ratio</title>
<style>
#box1 {
width: 38%;
padding-top: 38%;
background-color: #46BC8F;
float: left;
}
#box2 {
width: 62%;
padding-top: 62%;
background-color: #8AD5BA;
float: right;
}
#box3 {
width: 100%;
padding-bottom: 100%;
background-color: #59D48B;
float: right;
}
@media screen and (orientation:landscape) {
.container{
height: 100vh;
width: 100vh;
}
}
@media screen and (orientation:portrait) {
.container{
height: 100vw;
width: 100vw;
}
}
.container{
margin: 0 auto;
}
}
</style>
</head>
<body>
<div class="container">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</body>
</html>
