Frequent case of sticky footer for IE, how justified?

T

the_stucky2018-06-14 22:23:04

css

the_stucky, 2018-06-14 22:23:04

I'm looking for different alternative design methods with a sticky footer. There is a table solution, but it is cumbersome and not entirely intuitive, a JS solution (which was discussed a little earlier) is universal, but not very good due to the mixing of behavior and presentation. A flexbox solution would be good for everyone - intuitive, concise and efficient, if only flexbox would work in IE.
The result of mental efforts was the following code:

This is CSS

*{
        margin:0px;
        padding:0px;
      }
      
      html{
        height:100%;
      }
      
      body{
        height:100%;
        font-family:Arial;
        font-size:16px;
        position:relative;
      }
      
      header{
        background-color:lime;
      }
      
      header, footer{
        display:block;
        min-height:200px;
      }
      
      footer{
        position:absolute;
        width:100%;
        bottom:0%;
        background-color:forestgreen;
      }
      
      .mainWrap>*{
        display:inline-block;
        margin-left:auto;
        margin-right:auto;
      }
      
      content{
        width:79%;
        min-height:200px;
        background-color:chartreuse;
      }
      
      aside{
        width:10%;
        min-height:200px;
        background-color:green;
      }

This is the body of the site template.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>test</title>
    <style>

  
    </style>
  </head>
  <body>
    <header>
      This is a header
    </header>
    <div class="mainWrap">
      <aside>sidebar left</aside>
      <content>A lot of content</content>
      <aside>sidebar right</aside>
    </div>
    <footer>
      This is a footer
    </footer>
  </body>
</html>

How justified is such a decision compared to more concise solutions on flex, how much should you bet when creating a site on the need for it to work correctly through ancient versions of IE (which do not understand the same flex or semantic tags)?
PS As for the html5 tags, for IE they are created by a separate script through createElement, which ensures the correct perception in the explorer.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

M

Maxim Timofeev, 2018-06-14
@webinar

Solution through tables - yes

fu-fu-fu
How without crutches to make the footer of the site always at the bottom?

M

maxsnw, 2018-06-15
@maxsnw

you let the footer go to absolute, set the bot-right-left to zeros and make a negative margin the size of the footer in the main wrapper of the site. ALL.