【发布时间】：2014-08-12 13:16:33
【问题描述】：
我在 Internet Explorer 和 Firefox 中遇到了 CSS 溢出自动结合高度 100% 的问题。不在谷歌浏览器中。
我想要的是一个高度和宽度为 100% 的表格。在那张桌子上有几个盒子，里面有 1 个 TD，我想自动溢出。下面是我目前使用的html和css。
html:
<table id="MainTable">
<tr>
<td id="frameTop">
Some title text
</td>
</tr>
<tr>
<td id="BottomFrame">
<table id="ContentTable">
<tr>
<td id="frameLeft">
<div id="boxLeft">
<ul id="mainmenu">
<li>
<span>Klanten</span>
<ul>
<li><a href="#">Toon Lijst</a></li>
<li><a href="#">Zoek Klant</a></li>
<li><a href="#">Nieuwe Klant</a></li>
</ul>
</li>
<li>
<span>Organisaties</span>
<ul>
<li><a href="#">Toon Lijst</a></li>
<li><a href="#">Nieuwe Organisatie</a></li>
</ul>
</li>
<li>
<span>Gebruikers</span>
<ul>
<li><a href="#">Gebruikers</a></li>
<li><a href="#">Nieuwe Gebruiker</a></li>
</ul>
</li>
<li>
<a href="#">Uitloggen</a>
</li>
</ul>
</div>
</td>
<td id="frameRight">
<div id="boxRight">
<span>test lijn 0</span><br>
<span>test lijn 1</span><br/>
<span>test lijn 2</span><br/>
<span>test lijn 3</span><br/>
<span>test lijn 4</span><br/>
<span>test lijn 5</span><br/>
<span>test lijn 6</span><br/>
<span>test lijn 7</span><br/>
<span>test lijn 8</span><br/>
<span>test lijn 9</span><br/>
<span>test lijn 10</span><br/>
<span>test lijn 11</span><br/>
<span>test lijn 12</span><br/>
<span>test lijn 13</span><br/>
<span>test lijn 14</span><br/>
<span>test lijn 15</span><br/>
<span>test lijn 16</span><br/>
<span>test lijn 17</span><br/>
<span>test lijn 18</span><br/>
<span>test lijn 19</span><br/>
<span>test lijn 20</span><br/>
<span>test lijn 21</span><br/>
<span>test lijn 22</span><br/>
<span>test lijn 23</span><br/>
<span>test lijn 24</span><br/>
<span>test lijn 25</span><br/>
<span>test lijn 26</span><br/>
<span>test lijn 27</span><br/>
<span>test lijn 28</span><br/>
<span>test lijn 29</span><br/>
<span>test lijn 30</span><br/>
<span>test lijn 31</span><br/>
<span>test lijn 32</span><br/>
<span>test lijn 33</span><br/>
<span>test lijn 34</span><br/>
<span>test lijn 35</span><br/>
<span>test lijn 36</span><br/>
<span>test lijn 37</span><br/>
<span>test lijn 38</span><br/>
<span>test lijn 39</span><br/>
<span>test lijn 40</span><br/>
<span>test lijn 41</span><br/>
<span>test lijn 42</span><br/>
<span>test lijn 43</span><br/>
<span>test lijn 44</span><br/>
<span>test lijn 45</span><br/>
<span>test lijn 46</span><br/>
<span>test lijn 47</span><br/>
<span>test lijn 48</span><br/>
<span>test lijn 49</span><br/>
<span>test lijn 50</span><br/>
<span>test lijn 51</span><br/>
<span>test lijn 52</span><br/>
<span>test lijn 53</span><br/>
<span>test lijn 54</span><br/>
<span>test lijn 55</span><br/>
<span>test lijn 56</span><br/>
<span>test lijn 57</span><br/>
<span>test lijn 58</span><br/>
<span>test lijn 59</span><br/>
<span>test lijn 60</span><br/>
<span>test lijn 61</span><br/>
<span>test lijn 62</span><br/>
<span>test lijn 63</span><br/>
<span>test lijn 64</span><br/>
<span>test lijn 65</span><br/>
<span>test lijn 66</span><br/>
<span>test lijn 67</span><br/>
<span>test lijn 68</span><br/>
<span>test lijn 69</span><br/>
<span>test lijn 70</span><br/>
<span>test lijn 71</span><br/>
<span>test lijn 72</span><br/>
<span>test lijn 73</span><br/>
<span>test lijn 74</span><br/>
<span>test lijn 75</span><br/>
<span>test lijn 76</span><br/>
<span>test lijn 77</span><br/>
<span>test lijn 78</span><br/>
<span>test lijn 79</span><br/>
<span>test lijn 80</span><br/>
<span>test lijn 81</span><br/>
<span>test lijn 82</span><br/>
<span>test lijn 83</span><br/>
<span>test lijn 84</span><br/>
<span>test lijn 85</span><br/>
<span>test lijn 86</span><br/>
<span>test lijn 87</span><br/>
<span>test lijn 88</span><br/>
<span>test lijn 89</span><br/>
<span>test lijn 90</span><br/>
<span>test lijn 91</span><br/>
<span>test lijn 92</span><br/>
<span>test lijn 93</span><br/>
<span>test lijn 94</span><br/>
<span>test lijn 95</span><br/>
<span>test lijn 96</span><br/>
<span>test lijn 97</span><br/>
<span>test lijn 98</span><br/>
<span>test lijn 99</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS：
html, body{
height:100%;
width:100%;
margin:0;
padding:0;
overflow:hidden;
}
#MainTable{
width:100%;
height:100%;
margin:0;
padding:0;
border:none;
border-spacing:0;
}
#MainTable tr td{
border:none;
border-width:0;
vertical-align:top;
}
#frameTop{
background:#a8d3ff;
height:80px;
}
#BottomFrame{
margin:0;
padding:0;
}
#ContentTable{
width:100%;
height:100%;
margin:0;
padding:0;
border:none;
border-spacing:0;
}
#ContentTable tr td{
border:none;
border-width:0;
vertical-align:top;
}
#frameLeft{
width:200px;
background:#323232;
vertical-align:top;
height:100%;
}
#boxLeft{
margin:0;
width:200px;
height:100%;
}
#frameRight{
background:#d7ffff;
}
#boxRight{
width:100%;
height:100%;
overflow:auto;
overflow:scroll;
}
#mainmenu,
#mainmenu li ul{
display: inline;
margin:0;
padding:0;
list-style:none;
}
#mainmenu li,
#mainmenu li ul li{
display:inline-block;
color:#fff;
font-size:18px;
position: relative;
background: linear-gradient(#628297, #4f6b81);
width:200px;
margin:0;
padding:0;
}
#mainmenu li:hover,
#mainmenu li ul li:hover{
background: linear-gradient(#3b3f48, #3c434d);
box-shadow: inset 0px 1px 1px #475059;
color:#fff;
}
#mainmenu li ul{
position: absolute;
top: 0px;
left: 200px;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
}
#mainmenu li:hover ul{
display: block;
opacity: 1;
visibility: visible;
}
#mainmenu li span,
#mainmenu li a,
#mainmenu li ul li a{
display:block;
margin:0;
padding:15px;
color:white;
text-decoration:none;
}
在那里，您可以在 chrome 中看到必须做的事情。在 Firefox 和 IE 上它也不在那里工作。
当我删除 body 的 overflow:hidden 属性时，他将在 ie 和 firefox 上滚动洞页面，但这不是我想要的，因为左侧/顶部 TD 不能滚动。当我使用以像素为单位的宽度而不是 % 时，它可以工作，但我在大屏幕上得到了一个小尺寸或在小屏幕上得到了一个大尺寸。
如何在 Firefox 和 IE 中将高度 100% 设置为窗口大小而不是更大？
【问题讨论】：
-
代码链接：jsfiddle.net/J3Kv4
-
使用Edit 选项用小提琴更新问题可能比 cmets 更受关注...
-
小提琴在主要问题中被阻止。必须在代码中比。这就是它在评论中的原因。
-
允许链接到 jsfiddle，您只需要一个简短的代码块。
-
使用像素方法，您仍然可以使用CSS Media Queries。但是，请注意，我们在 2014 年，表格布局不是可行的方法（仅适用于表格日期，（和申请表）。表格（尤其是 tr）的盒子模型相比略有不同阻止元素，这可能是浏览器反应不同的原因。您可能需要查看 floats 和 Flexbox 以实现您想要的布局。