поместите html после полноэкранного адаптивного div с помощью Bootstrap 4

Question

В основном у меня есть 3 основных компонента: 1 панель навигации, 1 разделение содержимого на разделы и 1 нижний колонтитул.

Я наконец сделал свой дизайн адаптивным для первых двух компонентов, но не для нижнего колонтитула.

мой контейнер содержимого (родительский) имеет класс h-100, который задает высоту 100%. Дочернее также имеет значение 100%. Проблема заключается только в том, что при использовании инспектора я вижу, что мой родительский контейнер распознается как имеющий размер экран и из-за этого нижний колонтитул размещается после первого раздела (есть 3 или более разделов, которые должны быть в 3 или более раз больше высоты экрана минус навигационная панель )

Вот воспроизведение результирующего HTML (я обычно использую Angular)

@media (max-width: 979px) {
  .section {
    padding-top: 0px;
  }
}

.section{
	display: flex;
	min-height: 100%;
    height: 100%;
    border: 1px solid black;
    padding-top: 60px;
}

.inner-section{
	padding:5%;
	border: 1px solid black;
}

html, body {height: 100%;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-light bg-success fixed-top">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarAHS" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarAHS">
      <ul class="navbar-nav mr-auto">
         <li class="nav-item">
           <a class="nav-link" >testleft</a>
         </li>
      </ul>
      <ul class="navbar-nav mx-auto order-0">
  	     <li class="nav-item">
      	   <a class="nav-link">testmiddle</a>
      	 </li>
      </ul>
      <ul class="navbar-nav ml-auto">
         <li class="nav-item">
           <a class="nav-link" href="#hello">testRight</a>
         </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid h-100">
	<div class="row section justify-content-md-center">
		<div class="inner-section col-md-10 h-100">
			hello
		</div>
	</div>
	<div class="row section justify-content-md-center">
		<div class="inner-section col-md-10 h-100">
			hi
		</div>
	</div>
	<div class="row section justify-content-md-center">
		<div class="inner-section col-md-10 h-100">
			hey
		</div>
	</div>
</div>

<div class="row">
	Footer is not placed correctly
</div>

Answer 1

Ваша проблема в том, что вы указываете высоту 100% для контейнера, но 100% чего? В вашем случае тег body, но тело получает его высоту от размера вашего контента (который в полноэкранном режиме составляет около 1000 пикселей для первого блока контента), затем вы также указываете 100% высоты для каждого из ваших блоков контента. Опять 100% чего? Контейнер, который является 1000px, является этим примером. Таким образом, нижний колонтитул подпрыгивает после того, что он считает размером страницы, но затем каждый из дополнительных блоков контента также получает ту же высоту, что приводит к вашей странной ситуации.

Короче говоря, если вам нужно сохранить 100% высоты контейнера, попробуйте добавить overflow: auto в контейнер. В противном случае вы можете удалить правило 100% высоты из контейнера.

Answer 2

вот мое решение.

пожалуйста, скажите мне, если это не лучшая практика.

каждая строка заключена в div с h-100 в качестве класса, и она работает

я тоже удалил container-fluid

HTML

@media (max-width: 979px) {
  .section {
    padding-top: 48px;
  }
}

.section{
	display: flex;
	min-height: 100%;
    height: 100%;
    border: 1px solid black;
    padding-top: 48px;
}

.inner-section{
	padding:5%;
	border: 1px solid black;
}
html, body {height: 100%;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-success fixed-top">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarAHS" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarAHS">
      <ul class="navbar-nav mr-auto">
         <li class="nav-item">
           <a class="nav-link" >testleft</a>
         </li>
      </ul>
      <ul class="navbar-nav mx-auto order-0">
  	     <li class="nav-item">
      	   <a class="nav-link">testmiddle</a>
      	 </li>
      </ul>
      <ul class="navbar-nav ml-auto">
         <li class="nav-item">
           <a class="nav-link" href="#hello">testRight</a>
         </li>
      </ul>
    </div>
  </div>
</nav>
<div class="h-100">
	<div class="row section justify-content-md-center">
		<div class="inner-section col-md-10">
			hello
		</div>
	</div>
</div>
<div class="h-100">
	<div class="row section justify-content-md-center">
		<div class="inner-section col-md-10">
			hey
		</div>
	</div>
</div>
<div class="h-100">
	<div class="row section justify-content-md-center">
		<div class="inner-section col-md-10">
			ola
		</div>
	</div>
</div>
<div class="row">
	Footer is placed correctly.
</div>