Высота элемента на всю страницу

[Askhat7]

Всем привет!

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

Вот картинка

[satantx]

Лучше код покажите, а не картинку

[Askhat7]

Лучше код покажите, а не картинку

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;}

Я много раз менял его, это последнее, что я написал

[abrahadabra]

Лучше выложите на jsfiddle, чтобы можно было посмотреть в действии, а то так только догадываться приходится.

 

Из того, что вижу навскидку, для main высота явно не задана, а значит, нельзя дочерним отталкиваться от его высоты.

[Askhat7]

Лучше выложите на jsfiddle, чтобы можно было посмотреть в действии, а то так только догадываться приходится.

 

Из того, что вижу навскидку, для main высота явно не задана, а значит, нельзя дочерним отталкиваться от его высоты.

https://jsfiddle.net/Askhat/vp0o5x6x/- вот исходник

 

Для main необходимо задать какую-то статичную высоту, я правильно понял? 

Просто я пробовал ставить min-height со статичной высотой в 700px, однако элементы внутри main все равно не занимали весь main.

[abrahadabra]

ну всё правильно — ставим height, и работает.

[Igor Schnaider]

Можно еще использовать viewport размеры (vh).

[Askhat7]

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