JSFiddle - React, Tailwind, and code Playground

by xandeadx xandeadx

HTML

<html>
<body>
  <div class="header">Шапка</div>
  <div class="main">Контент</div>
  <div class="footer">Подвал</div>
</body>
</html>

CSS

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
}
.main {
  flex-grow: 1;
}

/* UI */
.header {
  padding: 20px;
  background: #FF9F9F;
}
.main {
  padding: 20px;
  background: #B5DFDF;
}
.footer {
  padding: 20px;
  background: #D7A573;
}
a {
  display: block;
  margin-top: 20px;
}

JavaScript

$(function() {
	var $link = $('<a href="#">Добавить контент</a>');
  $link.click(function(event) {
  	event.preventDefault();
  	var $main = $('.main');
    $main.html('content '.repeat(1000));
  });
  $link.appendTo('.main');
});