Askhat7

Спасибо всем большое! Я нашел решение.

https://jsfiddle.net/Askhat/vp0o5x6x/- вот исходник Для main необходимо задать какую-то статичную высоту, я правильно понял? Просто я пробовал ставить min-height со статичной высотой в 700px, однако элементы внутри main все равно не занимали весь main.

html, body{ width: 100%; height: 100%; min-height: 100%;}body{ margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 14px;}a{ text-decoration: none;}*{ margin: 0; padding: 0;}nav{ width: 100%; height: 70px; font-size: 11px; position: fixed; background: rgba(30, 41, 46, .9); z-index: 999;}nav > ul{ list-style: none; float: right;}nav > ul > li{ float: left; height: 70px; padding: 0px 10px; line-height: 70px; text-align: center;}nav > ul > li > a{ display: block; height: 70px; padding: 0px 10px; color: #fff; transition: all .3s;}nav > ul > li > a:hover{ color: #FF7040; transition: all .3s;}.logo{ height:70px; width: 110px; float: left; margin-left: 100px; font-family: 'Titillium Web', sans-serif;}.logo > a > h1{ line-height: 70px; color: #fff; font-size: 40px;}.logo > a > h1 > b{ color: #FF7040;}.log-reg-wrap{ float: right; margin-top: 20px;}.log{ padding: 0px 10px; height: 30px; background: #3797BF; text-align: center; line-height: 30px; float: left; margin-right: 10px; margin-left: 20px; border-radius: 2px; transition: all .3s;}.log:hover{ background: #3DA7D5; transition: all .3s;}.reg:hover{ background: #2ED5B1; transition: all .3s;}.reg{ padding: 0px 10px; height: 30px; background: #2BC6A4; text-align: center; line-height: 30px; float: left; margin-right: 100px; border-radius: 2px; transition: all .3s;}.log a, .reg a{ color: #fff; display: block; padding: 0px 10px; height: 30px;}main{ width: 100%; min-height: 100%;}.content{ width: 100%; min-height: 100%; clear: both;}.container-r{ width: 300px; min-height: 100%; padding: 20px 20px 20px; background: #F5F7F8; color: #5D5F5F; float: left; border-right: 1px solid #E1E6E6; border-top: 70px solid #fff;}.menu-r > ul{ list-style: none; margin-top: 10px;}.menu-r > ul > li{ width: 250px; height: 40px; line-height: 40px; padding-left: 10px; border-bottom: 1px solid #E1E6E6;}.menu-r > ul > li:hover{ background: #E1E6E6;}.menu-r > ul > li:first-child{ border-top: 1px solid #E1E6E6;}.menu-r > ul > li > a{ color: #5D5F5F; display: block; width: 250px; height: 40px;}.menu-r > h3{ margin-left: 10px;}i > img{ width: 10px; margin-right: 5px; margin-top: 10px;}.main-content{ width: 800px; min-height: 100%; border-top: 70px solid #fff; margin: 0px 20px 20px; background: #000; float: left;}Я много раз менял его, это последнее, что я написал

Всем привет! У меня такая проблема: я не могу сделать так, чтобы элементы, находящиеся в теге main имели высоту в 100%. Я уже все перепробовал, даже скрипт написал, ничего не выходит. В html и body прописывал min-height и height в 100%. У main высота также 100%. Вот картинка