Footer to bottom of the page in Windows Phone

Question

I'm afraid my question is very, very lame, but I really can't find a perfect solution for pushing a footer to the bottom of the page in Windows Phone Internet Explorer. Basically, I've got a layout like this:

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            color: white;
        }
        body {
            display: flex;
            flex-flow: column;
        }
        header {
            background: blue;
        }
        main {
            background: green;
            flex: 1 0 auto; /* This kind of works, but there is definitely space between bottom of the footer and bottom of the screen */
            flex: 1; /* Doesn't work at all, footer stays on top of the page like 'main' doesn't exist at all */
            /* Both options work perfectly fine in Chrome and Edge */
        }
        footer {
            background: red;
        }
    </style>
</head>

<body>
    <header>Header here</header>
    <main>Content here</main>
    <footer>Footer here</footer>
</body>

This works everywhere, except Windows Phone IE. I've tried many options, but no one works fine. Footer height can change dynamically, and I don't want to do some weird calcultaions in JavaScript. Also, I don't want to fix the footer, it should be just pushed to bottom.

Unfortunately, it doesn't work. Literally has no effect on WP IE rendering. `display: block;`, `display: flex`, `height: 100%` -- none of these work. — Urffly, Jun 20 '16 at 11:54
I believe it's IE 11, but, obviously, not the same as desktop one. Windows Phone 8.1. — Urffly, Jun 20 '16 at 12:15

score 1 · Answer 1 · answered Feb 02 '20 at 11:30

Here is a pure css solution.

* {
    margin: 0;
    padding: 0;
    color: white;
}
        
html, body {
    height: 100%;
}
        
body {
    display: flex;
    flex-flow: column;
}

header {
    background: blue;
    height: 10%;
}

main {
    background: green;
    height: 80%;
    flex: 1 0 auto; /* This kind of works, but there is definitely space between bottom of the footer and bottom of the screen */
    flex: 1; /* Doesn't work at all, footer stays on top of the page like 'main' doesn't exist at all */
    /* Both options work perfectly fine in Chrome and Edge */
}

footer {
    background: red;
    height: 10%;
}

<body>
    <header>Header here</header>
    <main>Content here</main>
    <footer>Footer here</footer>
</body>

score 0 · Answer 2 · answered Jan 30 '20 at 14:22

Not sure if this is still active but Here is a vanilla javascript and css way of handling footers, it takes the screen height and compares it to the client height of the main div in your html body. this should work on all platforms that support js.

/* This is only being run on document ready, so will only trigger on page load/refresh, this may be ok for static pages, but for dynamic pages can be solved by bulding this into a function and calling it when necessary */

let clientHeight = screen.height;
let scrollHeight = document.getElementById('root').clientHeight;

console.log(clientHeight);
console.log(scrollHeight);

let isYOverflown = false
if(clientHeight < scrollHeight){
  isYOverflown = true
}
console.log(isYOverflown)

if (isYOverflown == false){
    /* If the y axis is not overflowing fix the footer to the bottom of the screen */
    console.log('Fix footer')
    document.getElementById('footerBar').style.position = 'absolute'
    document.getElementById('footerBar').style.bottom = '0'
} else {
    /* If the y axis is overflowing release the footer */
    console.log('Float footer')    
    document.getElementById('footerBar').style.position = 'relative'
    document.getElementById('footerBar').style.bottom = ''
}

body{
    margin: 0;
}

.navBar{
    height:100px;
    background-color: aquamarine;
}

.bodyContent{
    background-color: cadetblue;
    /* Adjust the height of the body content to trigger the overflow */
    height: 100px;
}

#footerBar{
    background-color: crimson;
    height: 200px;
    width:100%;
}

<body>
    <div id="root">
        <div>
            <header class="navBar">
                header
            </header>                
            <div class="bodyContent">
                Body
            </div>
            <footer id="footerBar" >
                Footer
            </footer>
        </div>            
    </div>
</body>

The asker was specific that he/she needs to avoid calculations with Javascript. A CSS-only solution is needed as a result. Maybe height: 100%; is helpful here. Or calling calc in the CSS code. — Lajos Arpad, Jan 30 '20 at 14:55
The javascript is minimal and the CSS only solution usually puts one on a restrictive path in terms of styling other elements, as mentioned if one were to consider this minimal Javascript solution switching between fixed and not allows one to have a dynamically sized footer as well as the opportunity to trigger other functionality, and as mentioned it should work on any device. maybe this user does not find my Javascript solution helpful but someone else who does not mind Javascript may do so. — Karl Krabbenhoft, Jan 31 '20 at 07:15
I think you have misunderstood my comment. My point is that the asker wants a CSS-only solution. This doesn't make your answer unhelpful for others, it's just out of scope in this question. In order to make it work in all devices one can apply responsive design. Also, in general, Javascript coding for design purposes should only occur when there is no solution in CSS in my opinion. — Lajos Arpad, Jan 31 '20 at 11:30

Footer to bottom of the page in Windows Phone

2 Answers2