Question posted in 
I’m trying to understand where does this go wrong on IE 11.
My footer overlaps with the main content of the page, where the main content does not have a fixed height, as the items filling it might differ. This looks great on chrome, but overlaps on IE 11.
Here is a snippet and a jsbin link.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<style>
html,
body {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.navbar {
margin-bottom: 15px !important;
position: relative;
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after {
content: " ";
display: table;
}
.navbar-header {
float: left;
}
#masthead .navbar-header .logo {
width: 266px;
height: 70px;
display: block;
}
#footer {
background-color: antiquewhite;
}
.breadcrumbs {
list-style-type: none;
vertical-align: top;
}
</style>
</head>
<body role="document" class="d-flex flex-column">
<nav id="masthead" class="navbar navbar-default" role="banner">
<div class="navbar-header">
<a class="logo">stuff here ....</a>
</div>
</nav>
<div class="container-fluid flex-fill w-100 pb-3 border border-primary">
<div class="d-flex flex-column">
<div class="breadcrumbs">
whatevs...
</div>
<div class="row">
<div class="col-xs-12 col-md-8 d-flex flex-column">
<div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
<h1 class="m-0 mt-1 font-size-24px">Hello</h1>
<div class="d-flex flex-column flex-md-row">
<div class="flex-fill font-size-14px font-size-sm-16px">
<span>there</span>
<span class="ml-2">general kenobi</span>
</div>
</div>
</div>
<div class="mt-2 mt-md-0">
something here
and another thing here
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
did we forget about this?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
</div>
</div>
<div class="col-xs-12 col-md-4 pr-md-0">
SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container-fluid mw-100">
<ul>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
</ul>
</div>
</footer>
</body>
</html>Looking for a solution to this and also for some documentation to understand and hopefully be able to help others in the future with similar issues. Thank you.
2
Answers
Check out this code:
You need to remove
height: 100% !important;from body style.From the tutorial to change the flex row layout to a column-based flex container you should add the classes
d-flex, flex-column, my-flex-container-column.Your solution has only
<body role="document" class="d-flex flex-column">so, change to
class="d-flex flex-column my-flex-container-column"It’s good to read tutorial
The
!importantshould be used rarely and only when you override existing css properties. Tested on both resolutions.