Как сделать отзывчивую и прокручиваемую основную панель для приложения SPA?

Question

Я работаю над приложением SPA, которое также будет иметь отзывчивый дизайн.

План должен состоять из фиксированного заголовка высоты (30px), затем заполненного содержимого и фиксированного нижнего колонтитула высоты (20px). Точно так же, как TableLayoutPanel (Absolute: 30, Percent: 100%, Absoulte: 20) в winforms.

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

Как я искал и общался с SO друзьями я пришел к этому решению:

<div class="shell"> 

<header class="shell-header">Header Info</header> 

<div class="main-row"> 
    <div class="main-scroll"> 
     <section class="main" 
      data-bind="router: { transition: 'entrance', cacheViews: true }"> 
     </section> 
    </div> 
</div> 

<footer class="shell-footer">Footer Info</footer> 

И это стили:

.shell { 
    height: 100%; 
    display: table; 
    width: 100%; 
} 

.shell-header { 
    width: 100%; 
    display: table-row; 
    height: 30px; 
} 

.shell-footer { 
    width: 100%; 
    display: table-row; 
    height: 20px; 
} 

.main-row { 
    display: table-row; 
    height: 100%; 
    width: 100%; 
} 

.main-scroll { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    background-color: #F5F5F5; 
    display: block; 
    height: 100%; 
    margin: auto; 
    max-width: 1100px; 
    position: relative; 
    width: 100%; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

.main { 
    height: 100%; 
    background-color: whitesmoke; 
    max-width: 1100px; 
    width: 100%; 
    position: absolute; 
    display: block; 
} 

Это решение работает отлично подходит для Firefox и Chrome и после любого изменения размера Все в порядке. Но в IE 10 div class="main-scroll" не заполняет его родительский, а его высота равна 0px.

Вопрос 1: Почему это так?

Вопрос 2: Какое обходное решение для IE10?

Answer 1

Является ли ваш тег HTML и BODY установленным на высоту: 100%? Поскольку проценты основаны на родительском элементе, а не на видовом экране. При этом я бы рекомендовал использовать следующий код.

HTML, (внутренний HTML тело тега):

<header> 
    Fixed header here 
</header> 
<section> 
    <p>Text here</p> 
</section> 
<footer>Fixed footer</footer> 

CSS-:

html { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
body { 
    width:100%; 
    position:relative; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
header { 
    height:30px; 
    position:absolute; 
    top:0; 
    width:100%; 
    text-align:center; 
    color:white; 
    background-color:black; 
} 
section { 
    padding: 30px 20px; /* first number needs to be higher then height header/footer */ 
    box-sizing:border-box; 
    height:100%; 
    overflow-y:scroll; 
} 
footer { 
    position:absolute; 
    z-index:1; 
    width:100%; 
    height:30px; 
    bottom:0; 
    text-align:center; 
    color:white; 
    background-color:black; 
} 

К сожалению, я не могу проверить его на Internet Explorer, так как я являюсь пользователем Mac. Вот ссылка на скрипт JS: http://jsfiddle.net/Ykt98/2/ Также имейте в виду, что HTML5-теги должны быть «подделаны» в некоторых браузерах (IE) Javascript.

<!--[if IE]> 
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->