Question

以下是重现此问题的代码，该问题发生在IE 11中，但不是chrome，它运行良好。问题是，当高度为100％时，reddiv不会溢出滚动，但是像在chrome中一样工作于固定高度（在chrome中尝试它，你会看到）。这段代码是我的应用程序的一部分，我挖出它。 reddiv应该是reciperight列的100％高度。我希望高度是动态的，所以没有固定的高度可以回答plz。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Contact - My ASP.NET MVC Application</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>

</head>
<body>
    <table id="pagetable">
        <tr>
            <td id="pagecolumn1">

            </td>
            <td id="pagecolumn2">
    <div id="divrecipepad" style="background-color:yellow;">

    <table id="recipetable">
    <tr>
        <td id="recipeleftcolumn">
            <div id="divrecipelist"></div>
        </td>
        <td id="reciperightcolumn">
            <div style="height:100%;overflow-y:scroll">
                  Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                  Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                Blah Blah Blah blah<br />
                test<br />
                test<br />
                test<br />
                test<br />
                test<br />
                test<br />
                          </div>
        </td>
    </tr>

</table>
</div>

            </td>
            <td id="pagecolumn3">
                <div id="picframe">

                </div>
            </td>
        </tr>
    </table>
    <script src="/Scripts/jquery-1.8.2.js"></script>


</body>

html {
margin: 0;
padding: 0;
height:100%;
}

body {
/*background: url("PageImages/retina_wood.png"),repeat;*/ 
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
height:100%;
min-height:100%;
}


#pagetable {
width:100%;
height:100%;
}

#pagecolumn1 {
width:20%;
/*background-color:green;*/
}

#pagecolumn2 {
width:60%;
/*background-color:blue;*/
}

#pagecolumn3 {
width:20%;
/*background-color:green;*/
}

#divrecipepad {
width:90%;
height:90%;
margin:auto;
background-color:white;
box-shadow:10px 10px 20px black;
border-radius: 0px 0px 20px 20px;
padding-bottom:7px;
}
#recipetable {
width:98%;
height:82%;
margin:auto;
background-color:green;

}

#recipeleftcolumn {
width:30%;
/*background-color:aqua;*/
vertical-align:top;
}

#reciperightcolumn {
width:70%;
background-color:lightcoral;
vertical-align:top;
}

#divrecipelist {
width:100%;
height:100%;
overflow-y:auto;
}

#tablerecipelist td {
padding:1px;
}

#divrecipelist a {
color:green;
margin-left:5px;
}

#divrecipe {
width:96%;
height:100%;
padding-left:15px;
margin:auto;
overflow-y:scroll;
font-size: .8em;
background-color:red;
}

CSS3 overflow-y：在IE 11中高度为100％时滚动问题

0 个答案: