Высота страницы до 100% области просмотра? ⇐ CSS

[Anonymous]

Я начну с того, что я очень новичок в веб-разработке в целом и что это мой самый первый адаптивный сайт, поэтому, пожалуйста, будьте осторожны и имейте это в виду, я - определение слова нуб в этом этап. Некоторое время я искал ответ, но безуспешно, и надеюсь, что кто-нибудь здесь сможет мне помочь.
Я пытаюсь создать домашнюю страницу для этого веб-сайта. Дизайн представляет собой просто блок в левой части страницы, показывающий логотип вверху, а затем серию ссылок внизу, все из которых находятся на одном и том же фоне. Справа от этого находится одно большое изображение, занимающее остальную часть экрана. Я хочу, чтобы вся страница заполняла окно браузера любого устройства, на котором она просматривается, поэтому прокрутка не требуется, т. е. ширина и высота составляют 100% области просмотра. Ширина страницы меня совсем не огорчает: она легко подстраивается под разные размеры экрана по своему усмотрению: боковая панель занимает 20 % ширины, а основное изображение – 80 %.
А вот высота – это совсем другая история. Кажется, ни в одной комбинации CSS, которую я пробовал до сих пор, я не могу заставить высоту вести себя на уровне 100% области просмотра. Либо боковая панель слишком короткая, а основное изображение слишком длинное, либо оба слишком длинные и т. д. и т. п. Для основного изображения я хочу сохранить соотношение сторон и просто переполнить его div, как требуется, чтобы большая его часть отображалась, и что касается боковой панели, я просто хочу, чтобы она соответствовала 100% высоты страницы. Вот мой код на данный момент:

Код: Выделить всё

html
{
height: 100%;
margin: 0;
padding: 0;
}

body
{
height: 100%;
margin: 0;
padding: 0;
}

#page
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}

#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}

#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}

#mainimg
{
width: 100%;
overflow: hidden;
}

.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00);
}

@font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}








[img]/Images/logo.png[/img]
Home
About
Gallery
Prices
Reviews
Contact
Clients

[img]/Images/main.jpg[/img]

Любая помощь в этом будет очень признательна и не стесняйтесь указывать на любые массовые любительские ошибки. Я готов принять любую критику и извлечь из нее уроки. Спасибо

Подробнее здесь: https://stackoverflow.com/questions/196 ... f-viewport