溢出自动不工作即100%

时间:2014-03-27 15:34:05

标签: html css internet-explorer overflow

这是我的代码。 我希望class = main的div在超过我设置的高度限制时溢出垂直。溢出自动在Internet Explorer中不起作用。我对微软sh ## t感到疯狂。

<body>
<table class="container" border="0">
<colgroup>
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
</colgroup>

<tr class="header"> 
    <td colspan="1"></td>
    <td colspan="4">
        <a href=""></a>
    </td>
    <td colspan="15">
        <?php include '../include/menu.php';?>
    </td>
</tr>

<tr class="top_gap">
    <td colspan="20">&nbsp;</td>
</tr>

<tr class="title">
<td colspan="1"></td>
<td colspan="11"></td>
<td colspan="7" valign="bottom"  style="height:0;" >
<div class="transparent">
        <?php   DisplayTitle($option,$mysqli);  ?>
        </div>
    </td>
    <td colspan="1"></td>
</tr>


<tr class="main">   
    <td colspan="1"></td>
    <td colspan="11"></td>
    <td colspan="7" valign="top"  style="height:0;" >
        <div class="main">
        <div class="transparent">
            <?php DisplayText($option,$mysqli);?>   
        </div>
        </div>
    </td>
    <td colspan="1"></td>
</tr>

<tr class="bot_gap">
    <td colspan="20">&nbsp;</td>
</tr>

<tr class="footer" nowrap>
    <td colspan="20"><p></p></td>
</tr>
</table>
</body>

这是css

* {
    margin: 0;
    padding: 0;
}
html,body {
    height: 100%;
    font-family: Century Gothic, Arial, Courier New, Sans-Serif; 
    font-size: 0.5em;
    overflow:hidden; 
}
table{
    border-collapse: collapse;
    table-layout: fixed;
}
table.container{
    width:100%;
    height: 100%;
    min-height: 100%;
}
tr.header{
    height:15%;
    background-color: rgba(255,255,255,0.8);
}
tr.title{
    height:10%;
}
tr.main{
    height:60%;
}
tr.footer{
    height:5%;
    background-color: rgba(255,255,255,0.8);
}
tr.top_gap{
    height:5%;
}
tr.bot_gap{
    height:5%;
}
div.main{
    width:100%;
    height:100%;
    display:block;
    position:relative;
    overflow:auto;
}
div.transparent{
    padding:3em;
    background-color: rgba(255,255,255,0.7);
    display:block;
}

0 个答案:

没有答案