Bootstrap 4 - нижний колонтитул Pu sh в нижней части страницы и заполнение высоты основным содержанием - PullRequest
Новая
       6

Bootstrap 4 - нижний колонтитул Pu sh в нижней части страницы и заполнение высоты основным содержанием

1 голос
/ 08 апреля 2020

Я пытаюсь создать простой bootstrap макет с заголовком navbar и нижним колонтитулом. Я хочу, чтобы нижний колонтитул был перенесен в конец страницы, если не хватает содержимого.

Пока у меня есть это ... 

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.container {
	max-width:100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<header>
    <nav style="color:white;" class="navbar navbar-dark bg-dark">
        Navbar
    </nav>
</header>

<main style="background:grey;color:white;width:100%;" role="main" class="container">
    <p>
        Pin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin aliquam nisl, ut elementum eros volutpat ac. Aliquam erat volutpat. Fusce felis urna, cursus vel arcu vitae, egestas ornare nulla. Integer aliquam volutpat justo, vitae pharetra mi luctus ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel magna a ligula viverra posuere. Integer a augue id nunc hendrerit molestie. Morbi tempor sapien tellus, non dignissim ex dignissim sit amet. Suspendisse sed sodales mauris, et blandit mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eu posuere elit.
    </p>
</main>

<footer class="footer">
    <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
    </div>
</footer>

Это почти работает, но я хочу, чтобы основное содержимое также заполняло высоту. Таким образом, я могу вертикально центрировать его внутри div.

Может кто-нибудь увидеть, где я иду не так?

1 Ответ

2 голосов
/ 08 апреля 2020

используйте 100vh здесь, и если вам не нужна полная точка обзора, вы можете вырезать из нее высоту панели навигации, чтобы полоса прокрутки не появлялась. 

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.container {
	max-width:100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

.mainClass {
  height: calc(100vh - 40px);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<header>
    <nav style="color:white;" class="navbar navbar-dark bg-dark">
        Navbar
    </nav>
</header>

<main style="background:grey;color:white;width:100%;" role="main" class="container mainClass">
    <p>
        Pin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin aliquam nisl, ut elementum eros volutpat ac. Aliquam erat volutpat. Fusce felis urna, cursus vel arcu vitae, egestas ornare nulla. Integer aliquam volutpat justo, vitae pharetra mi luctus ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel magna a ligula viverra posuere. Integer a augue id nunc hendrerit molestie. Morbi tempor sapien tellus, non dignissim ex dignissim sit amet. Suspendisse sed sodales mauris, et blandit mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eu posuere elit.
    </p>
</main>

<footer class="footer">
    <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
    </div>
</footer>
...