webinmd · June 12, 2018 09:19
diff --git a/sticky_footer.html b/sticky_footer.html
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
    <head>
        <title>BlondieCode - Лайфхаки программиста - Приклеенный футер</title>
        <meta charset="utf-8">
        <style>
            /*============ Сброс стилей =============*/
            * {
                margin: 0;
            }
            html, body {
                height: 100%;
            }
            /*============ Основные стили =============*/
            body {
                background: #ffffff;
                color: #222222;
                font-family: Arial, Helvetica, sans-serif;
            }
            .content, .header, .footer {
                box-sizing: border-box;
                padding: 20px;
                width: 100%;
            }
            .header, .footer {
                background: #008080;
                color: #ffffff;
            }
            .content p {
                margin: 10px 0;
                font-size: 16px;
                line-height: 1.8;
            }
            /*===================================================================================*/
            /*=============== Откомментируй любой из способов приклейки футера ==================*/
            /*===================================================================================*/
            /*============ Способ 1 - абсолютное позиционирование =============*/
            /*body {
                position: relative;
                padding-bottom: 58px;
                box-sizing: border-box;
            }
            .footer {
                position: absolute;
                bottom: 0;
                height: 58px;
            }*/
            /*============ Способ 2 - при помощи псевдоэлемента :after =============*/
            /*.content {
                min-height: calc(100% - 58px);
                margin-bottom: -58px;
            }
            .content:after {
                content: '';
                display: block;
            }
            .content:after, .footer {
                height: 58px;
            }/*
            /*============ Способ 3 - Flexbox =============*/
            body {
                display: flex;
                flex-direction: column;
            }
            .content {
                flex-grow: 1;
            } 
            
            /*============ Способ 4 - Flexbox =============*/
            /*
            html,
            body {
              height: 100%;
            }

            .wrapper {
              display: flex;
              flex-direction: column;
              height: 100%;
            }

            .content {
              flex: 1 0 auto;
            }

            .footer {
              flex: 0 0 auto;
            }
            */
        </style>
    </head>
    <body>
        <div class="header">BlondieCode - Лайфхаки программиста - Приклеенный футер</div>
        <div class="content">
            <p>Среди владельцев котов на 17% больше людей с ученой степенью.</p>
            <p>Мозг кошки похож на человеческий. За эмоции у кошек отвечают те же самые участки, что и у людей.</p>
            <p>Чрезмерная любовь к кошкам называется айлурофилией.</p>
            <p>Кошки у своих хозяев снижают риск инсульта и инфаркта на треть.</p>
            <p>Исааку Ньютону приписывают изобретение кошачьей двери.</p>
            <p>Кошки спят около 70% своей жизни.</p>
            <p>Поверхность носа у кошек так же уникальна, как отпечатки пальцев у людей.</p>
            <p>Кошки узнают ваш голос, но предпочитают его игнорировать.</p>
            <p>За информацию о котиках спасибо AdMe.ru! Они стояли в топе выдачи по запросу &laquo;Факты о котиках&raquo; =)</p>
        </div>
        <div class="footer">#BlondieCode © 2016</div>
        <!-- Оставлю это здесь, чтобы поиграть с высотой футера ;) -->
        <!--<div class="footer">
            <p>Среди владельцев котов на 17% больше людей с ученой степенью.</p>
            <p>Мозг кошки похож на человеческий. За эмоции у кошек отвечают те же самые участки, что и у людей.</p>
            <p>Чрезмерная любовь к кошкам называется айлурофилией.</p>
            <p>Кошки у своих хозяев снижают риск инсульта и инфаркта на треть.</p>
            <p>Исааку Ньютону приписывают изобретение кошачьей двери.</p>
            <p>Кошки спят около 70% своей жизни.</p>
        </div>-->
    </body>
 </html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<title>BlondieCode - Лайфхаки программиста - Приклеенный футер</title>
	<meta charset="utf-8">
	<style>
	/============ Сброс стилей =============/
	* {
	margin: 0;
	}
	html, body {
	height: 100%;
	}
	/============ Основные стили =============/
	body {
	background: #ffffff;
	color: #222222;
	font-family: Arial, Helvetica, sans-serif;
	}
	.content, .header, .footer {
	box-sizing: border-box;
	padding: 20px;
	width: 100%;
	}
	.header, .footer {
	background: #008080;
	color: #ffffff;
	}
	.content p {
	margin: 10px 0;
	font-size: 16px;
	line-height: 1.8;
	}
	/===================================================================================/
	/=============== Откомментируй любой из способов приклейки футера ==================/
	/===================================================================================/
	/============ Способ 1 - абсолютное позиционирование =============/
	/*body {
	position: relative;
	padding-bottom: 58px;
	box-sizing: border-box;
	}
	.footer {
	position: absolute;
	bottom: 0;
	height: 58px;
	}*/
	/============ Способ 2 - при помощи псевдоэлемента :after =============/
	/*.content {
	min-height: calc(100% - 58px);
	margin-bottom: -58px;
	}
	.content:after {
	content: '';
	display: block;
	}
	.content:after, .footer {
	height: 58px;
	}/*
	/============ Способ 3 - Flexbox =============/
	body {
	display: flex;
	flex-direction: column;
	}
	.content {
	flex-grow: 1;
	}

	/============ Способ 4 - Flexbox =============/
	/*
	html,
	body {
	height: 100%;
	}

	.wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	}

	.content {
	flex: 1 0 auto;
	}

	.footer {
	flex: 0 0 auto;
	}
	*/
	</style>
	</head>
	<body>
	<div class="header">BlondieCode - Лайфхаки программиста - Приклеенный футер</div>
	<div class="content">
	<p>Среди владельцев котов на 17% больше людей с ученой степенью.</p>
	<p>Мозг кошки похож на человеческий. За эмоции у кошек отвечают те же самые участки, что и у людей.</p>
	<p>Чрезмерная любовь к кошкам называется айлурофилией.</p>
	<p>Кошки у своих хозяев снижают риск инсульта и инфаркта на треть.</p>
	<p>Исааку Ньютону приписывают изобретение кошачьей двери.</p>
	<p>Кошки спят около 70% своей жизни.</p>
	<p>Поверхность носа у кошек так же уникальна, как отпечатки пальцев у людей.</p>
	<p>Кошки узнают ваш голос, но предпочитают его игнорировать.</p>
	<p>За информацию о котиках спасибо AdMe.ru! Они стояли в топе выдачи по запросу «Факты о котиках» =)</p>
	</div>
	<div class="footer">#BlondieCode © 2016</div>
	<!-- Оставлю это здесь, чтобы поиграть с высотой футера ;) -->
	<!--<div class="footer">
	<p>Среди владельцев котов на 17% больше людей с ученой степенью.</p>
	<p>Мозг кошки похож на человеческий. За эмоции у кошек отвечают те же самые участки, что и у людей.</p>
	<p>Чрезмерная любовь к кошкам называется айлурофилией.</p>
	<p>Кошки у своих хозяев снижают риск инсульта и инфаркта на треть.</p>
	<p>Исааку Ньютону приписывают изобретение кошачьей двери.</p>
	<p>Кошки спят около 70% своей жизни.</p>
	</div>-->
	</body>
	</html>