Хотелось бы узнать, как можно разобраться с CSS, который сделает первый div в HTML ниже (тот, который с class="left-col") охватывает всю вертикальную высоту страницы. (NB: это свойство «полного вертикального диапазона» для div должно выполняться, даже если для просмотра нижней части страницы требуется прокрутка, а также не должно влиять на изменение размера окна, возможно, с оплавлением остальной части макет.)CSS, чтобы сделать div span полной высоты?
Меня больше интересует процесс рассуждения/обоснования/мысли, ведущий к желаемому CSS, чем в самом CSS-коде. IOW, я не ищу одноразового заклинания, но я ищу пример того, как рассуждать с помощью таких проблем.
(Кстати, я нашел некоторые SO темы, которые также просят о том, чтобы div пролете высоту страницы, но решения, приведенные в этих потоков не применяются к общему случаю, описанному выше (например, они если полная высота страницы больше высоты окна просмотра, поэтому для ее просмотра требуется вертикальная прокрутка). Что еще более важно, ни одно из решений, которые я нашел, не объясняет, почему они должны работать, поэтому они не работают обеспечить понимание я в первую очередь после того, как.)
(Вот jsFiddle для кода приведенного ниже.)
*{
margin:0;
padding:0;
border:0;
outline:0;
}
.right-col{
min-width:160px;
max-width:320px;
margin-left:auto;
font-family:consolas,monaco,courier,monospace;
font-size:22px;
line-height:43px;
}
.left-col{
width:80px;
background-color:orange;
}
<body>
<div class="left-col"></div>
<div class="right-col">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id nisi placerat, commodo elit sed, lacinia elit. Curabitur at malesuada nunc. Curabitur fermentum, neque at molestie lobortis, ligula mauris placerat felis, in hendrerit libero orci tempor sapien. Donec vel ultricies enim. Fusce tempus ante vitae purus laoreet laoreet. Maecenas urna felis, feugiat at lorem vitae, iaculis elementum nisi. Mauris venenatis lacinia nunc, sit amet bibendum tortor faucibus ac. Quisque lobortis condimentum diam, eget luctus odio iaculis in. Praesent malesuada velit at scelerisque porta. Nam dui arcu, mollis imperdiet semper vel, malesuada in nulla. Integer volutpat varius tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer iaculis odio et semper venenatis. Mauris quis convallis odio, nec ornare mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse pharetra mollis tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ac tortor a volutpat. Sed ac bibendum tortor. Morbi vitae augue in dui ultrices convallis vel eu massa. In congue gravida leo, et vehicula lacus posuere fermentum. Suspendisse molestie ipsum sit amet accumsan luctus. Pellentesque nec blandit ipsum. Aliquam magna risus, iaculis eget sapien quis, tristique sagittis diam. Etiam consectetur dapibus augue quis egestas. Phasellus pellentesque scelerisque ligula eget consequat. Maecenas bibendum nibh vel aliquet rutrum. Nullam faucibus diam diam, vitae hendrerit erat rhoncus non. In semper tortor eu leo hendrerit venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
</body>
В частности, я не заинтересован в растворах, которые достигают "подобный взгляд" совершенно другими способами (например, используя фоновое изображение или временную настройку свойств стиля с помощью JavaScript). Я знаю о таких альтернативных решениях и не нуждаюсь в помощи с ними.