День добрый, есть макет, в котором готово все, кроме футера.
Пробовал разными способами, но ничего не получалось, футер отображался только внизу обозреваемого поля страницы.
(Черным является footer)
Хотя, ниже есть еще контент. Как я узнал, устанавливая height: 100% для html, body, они имеют высоту 500px. Поэтому именно на таком расстоянии и отображается footer.
В этом деле я еще молод, мало понимаю.
body{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: white;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
img{
height: auto;
max-width: 100%;
margin: 0 auto;
vertical-align: middle;
}
.container{
width: 99%;
margin: 0 auto;
}
div {
box-sizing: border-box;
}
header{
display: inline-block;
background: #2f3640 no-repeat center top / cover;
width: 100%;
}
aside{
float: left;
width: 250px;
}
section{
min-height: 100%;
position: relative;
}
.content{
height: 100%;
padding-bottom: 50px;
}
footer{
padding-top: 50px;
background: #000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="content">
<header class="clearfix">
<div class="container">
<a href="/"><img class="logo" src="img/logo6.png"></a>
<ul class="menu">
<form>
<input type="text" placeholder="Что ищем?">
<button type="submit"></button>
</form>
<ul class="signlogin">
<li><a href="#">Регистрация</a></li>
<li><a href="#">Авторизация</a></li>
</ul>
</ul>
</div>
</header>
<section>
<div class="container">
<aside>
<ul class="catalog">
<li><a href="catalog/osnov-complect.html">Основные комплектующие</a></li>
<li><a href="catalog/hranenie-dannyh.html">Хранение данных</a></li>
<li><a href="catalog/ustroistva-rashireniya.html">Устройства расширения и апгрейд</a></li>
<li><a href="catalog/systemi-ohl.html">Системы охлаждения</a></li>
<li><a href="catalog/komp-system.html">Компьютерные системы</a></li>
<li><a href="catalog/periferiya.html">Периферия</a></li>
<li><a href="catalog/programmnoe-obesbechenie.html">Программное обеспечение</a></li>
<li><a href="catalog/accessories.html">Аксессуары</a></li>
</ul>
<ul class="news">
// тут новости
</ul>
</aside>
<div class="rec-catalog">
<p>Рекомендуемые Вам товары</p>
</div>
<ul class="products">
//тут у меня продукты
</ul>
</div>
</li>
</ul>
</div>
</section>
</div>
<footer>
<p>Подвал 2018</p>
</footer>
