CSS проблема макета с Firefox

Question

В существующем проекте у меня макет работает во всех браузерах, кроме Firefox, и до того, как я go вперед и разорву все это, мне было интересно, было ли быстрое исправление.

Учитывая следующее: https://jsfiddle.net/2m690rux/3

Прокручиваемая область в середине не прокручивается, потому что Firefox не будет прокручивать содержимое, если не знает фактическую высоту в пикселях, и вы не можете сказать height:100% (как и в примере), но это работает в Chrome и других.

Мне удалось рассчитать и установить высоту области прокрутки, удалив содержимое, измерив .height() и затем верните содержимое. Хотя это работает ... это болезненно и требует очень многих изменений в коде.

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

body, html{
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
body{
  position: static;
}
.container {
  height: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.theTable{
  width: 100%;
  height: 100%;
}
.topSection{
  height: 1px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
}
.midSection{
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
  padding: 5px;
}
.scrollContainer{
  height: 100%; /* <-- This is a problem for Firefox */
  overflow-y: auto;
}
.bottomSection{
  height: 1px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
}

<div class=container>
 <table class=theTable cellspacing=5 cellpadding=2>
  <tr>
   <td class="topSection">
    <div>n items of unknow height (no scroll)</div>
   </td>
  </tr>
  <tr>
   <td class=midSection>
    <div class=scrollContainer>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
    </div>
   </td>
  </tr>
  <tr>
    <td class=bottomSection>
     <div>n items of unknow height (no scroll)</div>
    </td>
  </tr>
 </table>
</div>

Answer 1

позиция может помочь: (если таблица не нужна, вы можете вдохновить себя Заполните оставшееся вертикальное пространство CSS, используя display: flex )

body, html{
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
body{
  position: static;
}
.container {
  height: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.theTable{
  width: 100%;
  height: 100%;
}
.topSection{
  height: 1px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
}
.midSection{
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
  padding: 5px;
  position:relative;
}
.scrollContainer{
  height: 100%; /* <-- This is a problem for Firefox */
  overflow-y: auto;
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
.bottomSection{
  height: 1px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
}

<div class=container>
 <table class=theTable cellspacing=5 cellpadding=2>
  <tr>
   <td class="topSection">
    <div>n items of unknow height (no scroll)</div>
   </td>
  </tr>
  <tr>
   <td class=midSection>
    <div class=scrollContainer>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
    </div>
   </td>
  </tr>
  <tr>
    <td class=bottomSection>
     <div>n items of unknow height (no scroll)</div>
    </td>
  </tr>
 </table>
</div>

Answer 2

Хотя я не понимаю, почему ваш код должен работать в других браузерах, проблему довольно просто решить. Если вы установите height: 100%, соответствующий div будет иметь общую высоту своего содержимого, поэтому прокручивать нечего!

Если вы хотите, чтобы ваша ячейка была прокручиваемой, вы должны установить max-height в scrollContainer. Скажем, например, max-height было 200px, тогда результат будет this .

Ваш overflow-y: auto; правильный, но ему нужно знать , когда содержимое переполняется. При высоте 100% не происходит переполнения содержимого.