Jsfiddle：https://jsfiddle.net/2oev7nLa/
我有一个固定导航栏和页脚的页面。该网站在Chrome和Firefox中按预期工作，但当内容溢出时（尤其是手风琴扩展），滚动条不会显示在Internet Explorer上。我正在测试IE 11，但我被告知同样的问题也发生在IE 10中。使用IE浏览上面的JSFiddle并扩展手风琴以了解我的意思。
导致此问题的CSS是以下
html,
body {
height: 100%;
overflow: hidden;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
max-height: calc(100% - 120px);
overflow-y: scroll;
padding: 0px 10%;
margin-top: 60px;
}
出于某种原因，IE正在覆盖我的溢出设置，我无法找到解决方案。
HTML：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link href="MasterPage.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/Content/scripts/Utility.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Test</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!--<li class="active"><a href="/">Home</a></li>-->
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</nav>
<!-- Wrap all page content here -->
<div id="wrap">
<div class="container">
<div class="page-header">
<h1>Tests</h1>
</div>
<p class="lead">Test</p>
<div id="collapsibleTable" class="table-responsive">
<table class="table table-striped table-hover table-bordered" style="border-collapse:collapse;">
<thead>
<tr>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#collapsible1" class="accordion-toggle">
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
</tr>
<tr class="hiddenRow"></tr>
<tr>
<td colspan="9" class="hiddenRow">
<div class="accordian-body collapse" data-gameId="@Current.GameID" id="collapsible1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis tortor. In hac habitasse platea dictumst. Morbi elementum est sed nunc tincidunt, eu porttitor nunc ultrices. Suspendisse imperdiet urna sed ex dapibus interdum non eget mauris. Donec ac magna nec mauris aliquam scelerisque et nec diam. Aliquam lorem odio, sollicitudin non nunc ac, volutpat iaculis erat. Nullam convallis arcu at metus blandit eleifend in a magna. Sed sollicitudin fringilla nibh eget iaculis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed fringilla id ipsum ut consequat. Sed nec pretium nunc. Nam id elementum elit, quis placerat leo. Curabitur at varius tortor, ac bibendum diam. Nam vulputate magna vel feugiat rutrum. Vestibulum convallis libero a est lacinia, sit amet laoreet neque pretium. Nunc diam ligula, facilisis non ante a, tempus congue elit. Duis egestas erat id suscipit elementum. Etiam sed ultrices neque. Etiam volutpat augue eget ex accumsan, in varius odio mollis. Phasellus a nunc hendrerit, vehicula mi at, ultrices turpis. Quisque ornare tristique leo, nec facilisis magna posuere sed. Nunc lacinia vestibulum commodo. Quisque eu consequat ipsum.
In auctor sapien a ex consectetur rhoncus. Ut dolor justo, dignissim nec ornare ac, rutrum eget ligula. Aenean nunc odio, rhoncus vel imperdiet eu, faucibus quis urna. In iaculis velit vel augue eleifend, eu sollicitudin purus hendrerit. Sed rhoncus felis nisi, in vehicula tellus efficitur quis. In scelerisque diam nisi, in dictum tellus faucibus sed. Aenean pharetra non augue quis tincidunt. Phasellus vel arcu sapien. In justo dui, semper a lorem sit amet, feugiat ullamcorper tortor. Praesent quis hendrerit magna. Sed facilisis rhoncus facilisis. Maecenas ac suscipit velit, at interdum neque. Ut sit amet eleifend dolor.
Vestibulum ut egestas metus. Nunc sagittis sapien ac nisi volutpat, non sagittis dui vehicula. Etiam vitae ante a leo vestibulum sodales. In finibus diam id mi condimentum, ac feugiat sem mollis. Ut sagittis dolor ac neque gravida tempus. Duis tempor dolor non convallis eleifend. Vivamus a tellus pharetra, condimentum sem ut, feugiat libero. Maecenas commodo luctus auctor. Sed ut auctor orci. Suspendisse tincidunt felis neque.
Suspendisse potenti. Donec tortor mi, elementum ut volutpat sed, auctor id urna. Phasellus ultrices ultricies orci, nec gravida felis rutrum et. Nulla feugiat nisl in diam blandit feugiat. Nam suscipit enim laoreet placerat rutrum. Mauris mattis pellentesque nulla, in sagittis nunc ullamcorper quis. Suspendisse et molestie mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pretium libero nec dolor faucibus, id elementum enim ultrices. Vestibulum dui urna, tristique in elit eu, eleifend feugiat eros. Vivamus velit velit, pharetra sit amet maximus vel, cursus id nulla. Maecenas ullamcorper, augue eget viverra dictum, ex nunc dignissim sapien, in mattis diam risus at ex.
Maecenas lectus tellus, semper nec metus vel, mattis ultricies elit. Pellentesque laoreet dapibus sem sit amet molestie. Cras purus nibh, dictum quis massa eget, sollicitudin euismod metus. Phasellus consequat eget nisi sed sollicitudin. Cras enim nulla, ornare eget sollicitudin ut, mattis vel arcu. Nam fermentum pellentesque nulla. Suspendisse eget nibh enim. Donec id nunc quis velit lobortis elementum. Maecenas non interdum ex. In placerat magna at nisl aliquet tristique. Mauris accumsan, est sit amet varius accumsan, risus libero blandit dolor, in malesuada quam lacus at nunc.
Donec finibus odio at lacinia tristique. Duis rutrum sapien ac mauris dignissim, tempus eleifend urna pretium. Phasellus non sem id ipsum accumsan consequat ultrices eu turpis. Etiam et purus congue lorem convallis porttitor. Morbi in diam id risus iaculis porta. Etiam commodo non ante ut maximus. Donec rhoncus porta justo. Proin sit amet ullamcorper turpis. Aliquam ut velit at eros semper laoreet ut non risus. Praesent luctus sit amet metus sed consectetur. Donec volutpat in magna eget posuere. Cras accumsan mattis odio quis fermentum. Integer quis fringilla nibh, egestas euismod quam. Nullam at tempus ipsum.
Duis efficitur, eros vitae imperdiet ullamcorper, est magna sollicitudin lectus, quis feugiat metus quam sed ante. Vestibulum facilisis placerat risus, sed porttitor nibh ultrices ut. Quisque urna odio, facilisis tempus vehicula sed, varius in risus. Praesent magna nunc, tincidunt ut enim vitae, convallis venenatis dui. Aliquam tristique ligula risus, et fringilla magna tincidunt semper. Cras dolor justo, efficitur at tellus quis, sagittis molestie purus. Nunc id metus placerat, dapibus libero at, sollicitudin massa. Donec at odio ex. Praesent suscipit bibendum turpis id imperdiet. Morbi non leo ac augue malesuada pellentesque ac a leo. Nam magna est, sollicitudin nec tempor sed, maximus vel leo. Duis tristique sem sit amet ante dignissim, et mollis mi maximus. Vivamus interdum magna rhoncus hendrerit tempor. Cras non blandit massa.
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#collapsible2" class="accordion-toggle">
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
</tr>
<tr class="hiddenRow"></tr>
<tr>
<td colspan="9" class="hiddenRow">
<div class="accordian-body collapse" data-gameId="@Current.GameID" id="collapsible2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis tortor. In hac habitasse platea dictumst. Morbi elementum est sed nunc tincidunt, eu porttitor nunc ultrices. Suspendisse imperdiet urna sed ex dapibus interdum non eget mauris. Donec ac magna nec mauris aliquam scelerisque et nec diam. Aliquam lorem odio, sollicitudin non nunc ac, volutpat iaculis erat. Nullam convallis arcu at metus blandit eleifend in a magna. Sed sollicitudin fringilla nibh eget iaculis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed fringilla id ipsum ut consequat. Sed nec pretium nunc. Nam id elementum elit, quis placerat leo. Curabitur at varius tortor, ac bibendum diam. Nam vulputate magna vel feugiat rutrum. Vestibulum convallis libero a est lacinia, sit amet laoreet neque pretium. Nunc diam ligula, facilisis non ante a, tempus congue elit. Duis egestas erat id suscipit elementum. Etiam sed ultrices neque. Etiam volutpat augue eget ex accumsan, in varius odio mollis. Phasellus a nunc hendrerit, vehicula mi at, ultrices turpis. Quisque ornare tristique leo, nec facilisis magna posuere sed. Nunc lacinia vestibulum commodo. Quisque eu consequat ipsum.
In auctor sapien a ex consectetur rhoncus. Ut dolor justo, dignissim nec ornare ac, rutrum eget ligula. Aenean nunc odio, rhoncus vel imperdiet eu, faucibus quis urna. In iaculis velit vel augue eleifend, eu sollicitudin purus hendrerit. Sed rhoncus felis nisi, in vehicula tellus efficitur quis. In scelerisque diam nisi, in dictum tellus faucibus sed. Aenean pharetra non augue quis tincidunt. Phasellus vel arcu sapien. In justo dui, semper a lorem sit amet, feugiat ullamcorper tortor. Praesent quis hendrerit magna. Sed facilisis rhoncus facilisis. Maecenas ac suscipit velit, at interdum neque. Ut sit amet eleifend dolor.
Vestibulum ut egestas metus. Nunc sagittis sapien ac nisi volutpat, non sagittis dui vehicula. Etiam vitae ante a leo vestibulum sodales. In finibus diam id mi condimentum, ac feugiat sem mollis. Ut sagittis dolor ac neque gravida tempus. Duis tempor dolor non convallis eleifend. Vivamus a tellus pharetra, condimentum sem ut, feugiat libero. Maecenas commodo luctus auctor. Sed ut auctor orci. Suspendisse tincidunt felis neque.
Suspendisse potenti. Donec tortor mi, elementum ut volutpat sed, auctor id urna. Phasellus ultrices ultricies orci, nec gravida felis rutrum et. Nulla feugiat nisl in diam blandit feugiat. Nam suscipit enim laoreet placerat rutrum. Mauris mattis pellentesque nulla, in sagittis nunc ullamcorper quis. Suspendisse et molestie mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pretium libero nec dolor faucibus, id elementum enim ultrices. Vestibulum dui urna, tristique in elit eu, eleifend feugiat eros. Vivamus velit velit, pharetra sit amet maximus vel, cursus id nulla. Maecenas ullamcorper, augue eget viverra dictum, ex nunc dignissim sapien, in mattis diam risus at ex.
Maecenas lectus tellus, semper nec metus vel, mattis ultricies elit. Pellentesque laoreet dapibus sem sit amet molestie. Cras purus nibh, dictum quis massa eget, sollicitudin euismod metus. Phasellus consequat eget nisi sed sollicitudin. Cras enim nulla, ornare eget sollicitudin ut, mattis vel arcu. Nam fermentum pellentesque nulla. Suspendisse eget nibh enim. Donec id nunc quis velit lobortis elementum. Maecenas non interdum ex. In placerat magna at nisl aliquet tristique. Mauris accumsan, est sit amet varius accumsan, risus libero blandit dolor, in malesuada quam lacus at nunc.
Donec finibus odio at lacinia tristique. Duis rutrum sapien ac mauris dignissim, tempus eleifend urna pretium. Phasellus non sem id ipsum accumsan consequat ultrices eu turpis. Etiam et purus congue lorem convallis porttitor. Morbi in diam id risus iaculis porta. Etiam commodo non ante ut maximus. Donec rhoncus porta justo. Proin sit amet ullamcorper turpis. Aliquam ut velit at eros semper laoreet ut non risus. Praesent luctus sit amet metus sed consectetur. Donec volutpat in magna eget posuere. Cras accumsan mattis odio quis fermentum. Integer quis fringilla nibh, egestas euismod quam. Nullam at tempus ipsum.
Duis efficitur, eros vitae imperdiet ullamcorper, est magna sollicitudin lectus, quis feugiat metus quam sed ante. Vestibulum facilisis placerat risus, sed porttitor nibh ultrices ut. Quisque urna odio, facilisis tempus vehicula sed, varius in risus. Praesent magna nunc, tincidunt ut enim vitae, convallis venenatis dui. Aliquam tristique ligula risus, et fringilla magna tincidunt semper. Cras dolor justo, efficitur at tellus quis, sagittis molestie purus. Nunc id metus placerat, dapibus libero at, sollicitudin massa. Donec at odio ex. Praesent suscipit bibendum turpis id imperdiet. Morbi non leo ac augue malesuada pellentesque ac a leo. Nam magna est, sollicitudin nec tempor sed, maximus vel leo. Duis tristique sem sit amet ante dignissim, et mollis mi maximus. Vivamus interdum magna rhoncus hendrerit tempor. Cras non blandit massa.
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">This is a test.</p>
</div>
</div>
</body>
</html>
CSS：
body {
margin-bottom: 60px;
}
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
overflow: hidden;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
max-height: calc(100% - 120px);
overflow-y: scroll;
padding: 0px 10%;
margin-top: 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
position: fixed;
bottom: 0;
width: 100%;
}
.hiddenRow {
padding: 0 !important;
cursor: default !important;
}
.hiddenRow tbody tr td {
background-color: white !important;
cursor: default !important;
}
答案 0 :(得分：2)
您的#wrap div正在使用一些组合导致此错误的内容。这些是overflow-y: scroll和max-height，但calc有时在IE11上表现得很奇怪。
最简单的解决方案是使用height: calc(100% - 120px)代替max-height，这将解决IE11上的问题。其他解决方法包括将元素设置为position: relative，但在您的情况下，max-height仍会导致问题。
答案 1 :(得分：1)
问题请用下面给出的样式替换包装样式
#wrap {
max-height: -moz-calc(100% - 120px);
max-height: -webkit-calc(100% - 120px);
height:450px;
overflow-y: scroll;
padding: 0px 10%;
margin-top: 60px;
}
请在此处查看示例代码codepen