l46kok l46kok - 3 months ago 8
CSS Question

Bootstrap 3 fixed footer css causing scrolling bug with Internet Explorer

Jsfiddle: https://jsfiddle.net/2oev7nLa/

I have a page with fixed navbar and footer in place. The site works as intended in Chrome and Firefox but the scrolling bar will not show up on internet explorer when contents overflow (particularly with accordion expanding). I'm testing with IE 11 but I've been told the same issue happens in IE 10 as well. Visit the JSFiddle above with IE and expand the accordions to get a sense of what I mean.

The CSS that's causing the issue is the following

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;
}


For some reason, IE is overriding my overflow-y settings and I can't find a solution for this.

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;
}

Answer

Your #wrap div is using a few things that combined are causing this bug. These are overflow-y: scroll and max-height, but also calc that sometimes behave weird on IE11.

The easiest solution is to use height: calc(100% - 120px) instead of max-height and that will solve the issue on IE11. Other workarounds include setting the element as position: relative but in your case, max-height still causes the issue.

Updated fiddle at https://jsfiddle.net/ct24m4q0/1/

Comments