Question

我遇到了css overflow auto与Internet Explorer和firefox中100％高度相结合的问题。不在Google Chrome中。

我想要的是一张高度和宽度均为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;
}

在那里，你会看到铬必须做什么。在Firefox和IE上它也没有在那里工作。

当我删除body：hidden属性时，他会在ie和firefox上滚动页面，但这不是我想要的，因为左/上TD不能滚动。当我使用像素宽度代替％时，它可以工作，但是我在大屏幕上使用小尺寸或在小屏幕上使用大尺寸。

JSFiddle

如何在firefox和IE中将高度100％设置为窗口大小而不是更大？

Answer 1

这个答案引起了我的注意，我永远不会想到这样做：https://stackoverflow.com/a/15893076/1831054

从那里开始，请给予他信任：

将height: 0;放入您想要滚动的各个区域。

溢出自动仅适用于chrome。为什么不在ie或firefox中

1 个答案: