Отзывчивый html, с фиксированным соотношением сторон и заполнением экрана

Question

Я пытаюсь создать отзывчивую веб-страницу с фиксированным соотношением 16x10. Код ниже работает до сих пор. Единственная проблема, с которой я сейчас сталкиваюсь, заключается в том, что когда ширина становится слишком большой, а страница должна быть прокручена.

Желаемое поведение заключается в том, что страница заполнит окно браузера, без обрезки в любом направлении, сохраняя желаемое соотношение.

Спасибо!

Мой HTML фрагмент:

<div id="wrapper"> 
    <div id="innerContent"> 
     <div id="header">...</div> 
     <div id="menuBar">...</div> 
     <div id="content">...</div> 
    </div> 
</div> 

Мой CSS сниппет:

body { 
    margin: auto; 
    box-sizing:border-box; 
} 
#wrapper{ 
    margin: 0 auto; 
    padding: 5vw; 
    text-align: center; 
} 
#innerContent{ 
    padding: 2vw; 
} 
#header { 
    position: relative; 
    height: 7vw; 
} 
#menuBar { 
    width: 100%; 
    height: 5vw; 
} 

#content { 
    height: 36vw; 
    width: 100%; 
    position: relative; 
} 

Answer 1

Наконец, нашел свое собственное решение. Используемые медиа-запросы для определения фиксированных разрешений для оболочки и использовали javascript для определения фиксированной высоты, рассчитанной с использованием процентов, чтобы иметь возможность использовать процентную ширину для дочерних элементов.

Answer 2

Это звучит как плохой дизайн, так что я бы попытаться убедить клиента сделать это по-другому.

Если это не удается, вы можете использовать подобную технику, чтобы иметь фиксированные отношения изображения и видео. Вы устанавливаете высоту в 0 и добавляете дополнение, эквивалентное отношению в%. Заполнение рассчитывается как% от ширины.

#wrapper { 
    height: 0; 
    padding-bottom: percentage(10/16); 
    background: rgba(0,0,0,0.2); 
    position: relative; 
    z-index: 0; 
} 

#innerContent { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: blue; 
    z-index: 1; 
} 

http://codepen.io/jaycrisp/pen/obPgYe

Примечание: расчет для этого используется функция Sass

Answer 3

Это не представляется возможным только с помощью CSS, вы должны будете использовать некоторые JavaScript.

Сначала мы должны получить ширину и высоту нашего окна и работать соотношение:

var height = window.innerHeight; 
var width = window.innerWidth; 
var ratio = height/width; 

Мы должны обращаться с Caculation по-разному в зависимости от того, если отношение окно больше или меньше чем 10/16:

var wrapperHeight, wrapperWidth; 
if (ratio >= 10/16) { 
    wrapperWidth = width; 
    wrapperHeight = width/1.6; 
} else { 
    wrapperHeight = height; 
    wrapperWidth = height * 1.6; 
} 
wrapper.style.height = wrapperHeight + 'px'; 
wrapper.style.width = wrapperWidth + 'px'; 

Затем нам нужно сделать этот расчет при загрузке страницы и при изменении размера окна.

window.onload = setRatio; 
window.onresize = setRatio; 

http://codepen.io/jaycrisp/pen/obPgYe