Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

IE 11 element after column flex overlap

Tags:

html

css

twitter-bootstrap

flexbox

internet-explorer-11

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.

like image 281
knee pain Avatar asked Nov 23 '25 10:11

knee pain

1 Answers

Check out this code:

<!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;
            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 row">
            <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>

You need to remove height: 100% !important; from body style.

like image 57
gpl Avatar answered Nov 24 '25 23:11

gpl

Sign in to Comment

Related questions

How to extract HTML textContent without removing the line breaks <br/>?
iOS rotates image when lower resolution selected (HTML5 Input file)

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!