div между верхним и нижним колонтитулом вертикальный 100%

Question

Я искал ответ на этот вопрос, но ничего не нашел. Я искал переполнение стека и другие ресурсы. Вопрос был задан раньше, и я попробовал каждый из них ответы.

Как я могу заставить div принять 100% от вертикального расстояния между верхним и нижним колонтитулом?

Вот мой код:

HTML

<div class="page-wrap"> 
<header>This is the header</header> 
    <div id="container"> 
    <div id="left">Left</div> 
    <div id="right">Right</div> 
    <div id="main">Main</div> 
</div> 
</div> 
<footer class="site-footer"> 
I'm the Sticky Footer. 
</footer> 

CSS

/* * { 
margin: 0; 
} */ 
html, body { 
    width: 100%; 
    height: 100%; 
    margin:0; 
} 
.page-wrap { 
min-height: 100%; 
/* equal to footer height */ 
margin-bottom: -80px; 
} 
.page-wrap:after { 
content: ""; 
display: block; 
} 
.site-footer, .page-wrap:after { 
height: 80px; 
} 
.site-footer { 
background: #265a88; 
} 

#left{ 
text-align:center; 
color:white; 
background-color: black; 
height: auto !important; 
height: 100%; 
border: black dash; 
float: left; 
width: 20%; 
min-height:100%; 
overflow: scroll; 

} 

#right{ 
    min-height:100%; 
    text-align:center; 
    color:white; 
    background-color: black; 
    height: 100%; 
    float: right; 
    width: 20%; 

    } 

    #main{ 
    text-align:center; 
    color:white; 
    background-color: blue; 
    height: 100%; 
    border: black dash; 
    float: right; 
    width: 60%; 
    max-height:100%; 
    overflow: scroll; 
    } 

    header{ 
    background-color: #265a88; 
    color:white; 
    text-align:center; 
    padding:5px; 
    } 

Answer 1

Вам нужно установить размеры контейнера, например:

#container{ 
    height: 100% 
    width: 100% 
    position: absolute; 
} 

Однако в вашем случае, вам придется установить высоту контейнера таким образом, чтобы он не переполнится и перейти колонтитул.

Answer 2

Для того, чтобы дочерний элемент, чтобы принять 100% высоты родителя, родитель должен иметь набор высоты (т. е. не может быть процентом). Это относится ко всем дочерним элементам, кроме тега body, родитель которого равен html, а html, установленный на 100%, обеспечивает заданную высоту пикселя для дочерних элементов. Простейшим обходным путем для этого является использование некоторого javascript для вычисления высоты данного родительского элемента, а затем соответственно установить дочерний элемент. Я не знаю о каком-либо чистом решении css, которое не требует каких-либо действий со свойствами, такими как высота строки. Насколько я знаю, это очень распространенная проблема для веб-разработчиков, и одна из них действительно зависит от вашей гибкости используемой технологии и того, как взломан, что вы хотите, чтобы ваш css выглядел.