CSS layout issue with Firefox

user_10894726 0
Viewed 44

In an existing project I have the layout working in all the browsers except Firefox, and before I go ahead and rip it all up, I was wondering if there was a quick fix.

Given the following: https://jsfiddle.net/2m690rux/3

The scrollable area in the middle is not scrolling because Firefox will not scroll content unless it knows the actual hight in pixels, and you cannot say height:100% (as the sample does) but this does work in Chrome and others.

I have been able to calculate and set the height of the scroll area by removing the content, measuring the .height() and then put the content back. Although this works... it is painful and requires very many changes to code.

Most of you are probably going to suggest using some complicated arrangements of DIVs and not tables, getting them to behave the same through some of the most mind boggling CSS hacks and tricks... so, I was wondering if anyone knows the simplest solution, considering that this sample is only a small example of a much much bigger code set... changes now will have huge ramifications.

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>

layout css html
2 Answers

position might help : (if table is not needed , you may inspire yourself from Fill remaining vertical space with CSS using 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>

user_24420990

While I don't understand why your code should work in other browsers, the issue is quite simple to solve. If you set height: 100% the respective div will have the total height of it's content, so there is nothing to scroll!

If you want your cell to be scrollable, you have to set a max-height to the scrollContainer. Let´s say for example the max-height was 200px, then the result would be this.

Your overflow-y: auto; is correct, but it needs to know when the content overflows. With a height of 100% there is no content overflowing.

user_59414130
Related