липкий стол для нижнего колонтитула, не работающий над Firefox/IE

Question

Я разрабатываю базовый липкий шаблон нижнего колонтитула с использованием метода display: table. Он отлично работает в Chrome, но в Firefox и IE нет: нижний колонтитул отбрасывается содержимым.

Очевидно, что я пропустил что-то основное здесь, я новичок в CSS, так что простите меня.

Здесь какой-то код:

HTML

<div id="container"> 
    <div id="header" class="row">Header</div> 
    <div id="content" class="row"> 
     <p>some content 1</p> 
     <p>some content 2</p> 
     <p>some content 3</p> 
     ... 
    </div> 
    <div id="footer" class="row">Footer</div> 
</div> 

и CSS

html, body{ 
    height: 100%; 
    overflow: hidden; 
    padding: 0; 
    margin: 0; 
} 
#container{ 
    width: 100px; 
    height: 100%; 
    display: table; 
} 
.row{ 
    display: table-row; 
    position: relative; 
} 
#header, #footer{ 
    height: 50px; 
} 
#content{ 
    float: left; 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
} 

DEMO HERE

Спасибо

Answer 1

УДАЛ Е float:left из #content:

Updated demo

Update

Учитывая необходимость прокручивать средней части и ваш фиксированный заголовок высоты и нижние колонтитулы, я хотел бы использовать фиксированное позиционирование вместо дисплея: таблицы;

#header, #footer, #content { 
 
    position:fixed; 
 
    left:0; 
 
    width:100%; 
 
} 
 
#header, #footer { 
 
    background:red; 
 
} 
 
#header { 
 
    top:0; 
 
    height:50px; 
 
} 
 
#footer { 
 
    bottom:0; 
 
    height:50px; 
 
} 
 
#content { 
 
    top:50px; /*height of header*/ 
 
    bottom:50px; /*height of footer*/ 
 
    overflow:auto; 
 
    padding:0; 
 
}

<div id="header" class="row">Header</div> 
 
<div id="content" class="row"> 
 
      <p>some content 1</p> 
 
      <p>some content 2</p> 
 
      <p>some content 3</p> 
 
      <p>some content 4</p> 
 
      <p>some content 5</p> 
 
      <p>some content 6</p> 
 
      <p>some content 1</p> 
 
      <p>some content 2</p> 
 
      <p>some content 3</p> 
 
      <p>some content 4</p> 
 
      <p>some content 5</p> 
 
      <p>some content 6</p> 
 
      <p>some content 1</p> 
 
      <p>some content 2</p> 
 
      <p>some content 3</p> 
 
      <p>some content 4</p> 
 
      <p>some content 5</p> 
 
      <p>some content 6</p> 
 
</div> 
 
<div id="footer" class="row">Footer</div>