Привет всем.
Подскажите как сделать прижатый footer на сайте без использования обертки (wrapper).
На примере:
https://jsfiddle.net/to43en7w/1/<body>
<header class="header">
<div class="wrapper clear">
<div class="logo">
<a title="Текст2" alt="Текст" href="/">
<img src="" alt="">
</a>
</div>
<nav class="nav-top">
<a class="nav-top__link" href="#">Главная</a>
<a class="nav-top__link" href="#">Новости</a>
<a class="nav-top__link" href="#">Контакты</a>
</nav>
</div>
</header>
<div class="main-container clear">
<div class="main-content">
<article>
<h1>Заголовок</h1>
<p>text</p>
<time></time>
</article>
</div>
<aside class="sidebar">
<div class="widget">
<h4 class="widget__tilte">Выращиваем желе</h4>
<div class="widget__content">
<p>Text</p>
</div>
</div>
</aside>
</div>
<footer class="footer">
<div class="wrapper clear">
<div class="footer-left">
<p>Text</p>
</div>
<div class="footer-right">
<p>Text2</p>
</div>
</div>
</footer>
</body>
*{
margin: 0;
padding: 0;
}
.clear:after{
content: "";
display: block;
clear: both;
}
html, body{
height: 100%;
}
body{
font-family: 'Roboto', sans-serif;
background: #fbfbfb;
}
.header{
min-height: 100px;
width: 100%;
background-color: #202722;
}
.wrapper{
margin: 0 auto;
max-width: 1200px;
}
.logo{
float: left;
margin-top: 30px;
}
.nav-top{
float: right;
margin-top: 40px;
}
.nav-top__link{
text-decoration: none;
color: #fff;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
}
.main-container{
margin: 0 auto;
max-width: 1200px;
margin-top: 30px;
margin-bottom: 30px;
}
.main-content{
background-color: #fff;
border: 1px solid #e1e1df;
width: 71%;
float: left;
padding: 30px;
box-sizing: border-box;
}
.sidebar{
background-color: #fff;
border: 1px solid #e1e1df;
width: 25%;
float: right;
}
.footer-left{
float: left;
}
.footer-right{
float: right;
}
.footer{
min-height: 150px;
background-color: #202722;
width: 100%;
}
Простой
Средний
