Ищу разные альтернативные способы оформления с прилипающим футером. Решение через таблицы - есть, но оно громоздкое и не совсем интуитивное, решение через JS (которое обсудили чуть раньше) '-универсальное, но не очень хорошее в силу смешения поведения и представления. Решение через флексбоксы было бы хорошо всем - интуитивной понятностью, лаконичностью и эффективностью, если бы только флексбоксы работали бы в IE.
итогом мыслительных усилий стал вот такой код:
Это 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;
}
Это тело шаблона сайта<!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>
Насколько оправдано такое решение по сравнению с более краткими решениями на флексах, насколько нужно закладываться при создании сайта на необходимость его правильной работы через ИЕ древних версий (не понимающих те же флексы или семантические теги)?
P.S. Что касается тегов html5, то для IE они создаются отдельным скриптом через createElement, обеспечивающим правильное восприятие в эксплорере.
Средний
Простой