Как сделать содержание div полным ростом при использовании прокладки на обертке?

Question

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

• У меня есть полностью неподвижный (заголовок/боковые панели/нижний колонтитул). Содержимое течет поверх верхнего и нижнего колонтитула.

• В настоящее время мой слой обертывания контента составляет слой 100% ширины/100% min-height над слоем навигации и с использованием простой прокладки сверху/снизу и полей слева и справа, я могу показать навигационных элементов.

• Внутри слоя обертки У меня есть мой контент div, который имеет мою страницу фон и тень. Но я не могу получить содержимое div до , развернутого на всю высоту обертки, потому что высота обертки основана на процентах. Поэтому все работает отлично, когда у меня есть контент, который заполняет или переполняет окно, но когда этого не происходит, содержимое div слишком мало.

Липкий нижний колонтитул не работает в этой ситуации, потому что липкий нижний колонтитул просто покрывает содержание (сам контент по-прежнему высотой 100%). Я в основном хочу, чтобы контент был минимальным - 100% - минус 50px-заголовок и 50px нижний колонтитул.

Есть ли какое-нибудь решение css без использования javascript hack или calc()? Я бы хотел, чтобы заголовок + нижний колонтитул не был зафиксирован, но я хочу сохранить тень окна в содержимом div (т. Е. 50 пикселей сверху и снизу страницы).

JSFiddle: https://jsfiddle.net/tyhenry/n9rpbj3m/5/

HTML:

<div id="nav"> 
    <div id="header"> 
     header 
    </div> 
    <div id="left-side"> 
     left sidebar 
    </div> 
    <div id="right-side"> 
     right sidebar 
    </div> 
    <div id="footer"> 
     footer 
    </div> 
</div> 
<div id="page-layer"> 

    <div class="page"> 
     content<br> 
     content<br> 
     content<br> 
    </div> 
</div> 

CSS:

* { 
    box-sizing: border-box; 
} 

html, body{ 
    background-color: #eeffff; 
    text-align: center; 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

#header { 
    position: fixed; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 50px; 
    background-color: #ddd; 
} 

#left-side { 
    background-color: #bbb; 
    position: fixed; 
    left: 0; 
    top: 50px; 
    width: 50px; 
    height: 100%; 
} 

#right-side { 
    background-color: #bbb; 
    position: fixed; 
    right: 0; 
    top: 50px; 
    width: 50px; 
    height: 100%; 
    overflow: hidden; 
} 

#footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 50px; 
    background-color: #aaa; 
} 

#page-layer{ 
    position:relative; 
    padding: 50px 0 50px 0; 
    margin: 0 50px 0 50px; 
    min-height: 100%; 
} 

.page { 
    background-color: #fff; 
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.8); 
    width:100%; 
} 

Answer 1

Если вы измените свойство дисплея flex оно заполняет всю высоту (между верхним и нижними колонтитулами) и подстраивает при изменении размера.

#page-layout { 
    display: flex; 
} 

Answer 2

дать этому вам желаемый результат? can i use viewport units

add: 
    .page { 
     min-height: 100vh; /*min-height not height :)*/ 
    } 

Answer 3

Попробуйте эту обновленное скрипку https://jsfiddle.net/n9rpbj3m/6/

#page-layer{ 

position:absolute; 
top:50px; 
left:50px; 
right:50px; 
bottom:50px; 
} 

.page { 
position:relative; 
background-color: #fff; 
box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.8); 
height:auto; 
min-height: 100%; 
width:100%; 
}