Футер не привязывается к концу страницы

14 марта 2021, 13:40

В мобильном режиме футер поднимается над основным контентом

@import url('https://fonts.googleapis.com/css?family=Varela+Round|Work+Sans&display=swap'); 
 
/*  */ 
 
* { 
	outline: none; 
	margin: 0; 
	padding: 0; 
	font-family: 'Work Sans', sans-serif; 
} 
 
html, 
body { 
	height: 100%; 
} 
 
body { 
	color: #6393ec; 
	background-color: #35373d; 
} 
 
input[type='button'], 
label { 
	cursor: pointer; 
} 
 
nav { 
	text-transform: uppercase; 
} 
 
article { 
	height: 100vh; 
} 
 
footer, 
header { 
	padding-left: 5%; 
	user-select: none; 
	background-color: red; 
} 
 
header { 
	padding-bottom: 70px; 
	padding-top: 70px; 
} 
 
footer { 
	/* width: 100%; 
	position: absolute; 
	bottom: 0; */ 
	color: #6e6f72; 
	padding-bottom: 45px; 
	padding-top: 45px; 
}

<!DOCTYPE html> 
<html lang="en"> 
	<head> 
		<meta charset="UTF-8" /> 
		<meta content="width=device-width, height: device-height, initial-scale=1" name="viewport" /> 
		<meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
	</head> 
	<body> 
		<noscript><h1>Turn on javascript support</h1></noscript> 
		<div class="container"> 
			<article> 
				Равным образом высокотехнологичная концепция общественной системы способствует подготовке и реализации соответствующих условий активизации. Не следует, однако, забывать, что управление и развитие структуры играет важную роль в формировании укрепления демократической системы. Для современного мира социально-экономическое развитие обеспечивает широкому кругу специалистов модели развития. Не вызывает сомнений, что реализация намеченных плановых заданий играет важную роль в формировании системы обучения кадров, соответствующей насущным потребностям. Задача организации, в особенности же курс на социально-ориентированный национальный проект требует определения и уточнения поставленных обществом и правительством задач. Идейные соображения высшего порядка, а также управление и развитие структуры играет важную роль в формировании систему массового участия. Следует отметить, что реализация намеченных плановых заданий обеспечивает актуальность направлений прогрессивного развития. С другой стороны повышение уровня гражданского сознания позволяет выполнять важные задания по разработке форм воздействия. Прежде всего социально-экономическое развитие позволяет оценить значение представляет собой интересный эксперимент системы обучения кадров, соответствующей насущным потребностям. С другой стороны сложившаяся структура организации требует анализа новых предложений.Равным образом высокотехнологичная концепция общественной системы способствует подготовке и реализации соответствующих условий активизации. Не следует, однако, забывать, что управле 
			</article> 
			<footer> 
				<p id="copyright" class="content flex">© 123123</p> 
			</footer> 
		</div> 
	</body> 
</html>

Answer 1

* { 
  outline: none; 
  margin: 0; 
  padding: 0; 
  font-family: 'Work Sans', sans-serif; 
} 
 
html, 
body { 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
} 
 
body { 
  color: #6393ec; 
  background-color: #35373d; 
} 
 
input[type='button'], 
label { 
  cursor: pointer; 
} 
 
nav { 
  text-transform: uppercase; 
} 
 
article { 
  flex: 1 0 auto; 
} 
 
footer, 
header { 
  padding-left: 5%; 
  user-select: none; 
  background-color: red; 
} 
 
header { 
  padding-bottom: 70px; 
  padding-top: 70px; 
} 
 
footer { 
  flex: 0 0 auto; 
  color: #6e6f72; 
  padding-bottom: 45px; 
  padding-top: 45px; 
}

<noscript> 
    <h1>Turn on javascript support</h1> 
  </noscript> 
<article> 
  Равным образом высокотехнологичная концепция общественной системы способствует подготовке и реализации соответствующих условий активизации. Не следует, однако, забывать, что управление и развитие структуры играет важную роль в формировании укрепления 
  демократической системы. Для современного мира социально-экономическое развитие обеспечивает широкому кругу специалистов модели развития. Не вызывает сомнений, что реализация намеченных плановых заданий играет важную роль в формировании системы обучения 
  кадров, соответствующей насущным потребностям. Задача организации, в особенности же курс на социально-ориентированный национальный проект требует определения и уточнения поставленных обществом и правительством задач. Идейные соображения высшего порядка, 
  а также управление и развитие структуры играет важную роль в формировании систему массового участия. Следует отметить, что реализация намеченных плановых заданий обеспечивает актуальность направлений прогрессивного развития. С другой стороны повышение 
  уровня гражданского сознания позволяет выполнять важные задания по разработке форм воздействия. Прежде всего социально-экономическое развитие позволяет оценить значение представляет собой интересный эксперимент системы обучения кадров, соответствующей 
  насущным потребностям. С другой стороны сложившаяся структура организации требует анализа новых предложений.Равным образом высокотехнологичная концепция общественной системы способствует подготовке и реализации соответствующих условий активизации. Не 
  следует, однако, забывать, что управле 
</article> 
<footer> 
  <p id="copyright" class="content flex">© 123123</p> 
</footer>

Убрал ваш div с классом container. Он здесь не нужен