页面底部的引导页脚答案

【问题标题】：Bootstrap footer at the bottom of the page页面底部的引导页脚
【发布时间】：2017-04-12 17:52:43
【问题描述】：

我已经阅读了很多关于此的帖子，但我仍然没有找到答案。 我想将页脚放在页面末尾，而不是固定的。 问题是页脚是内容结束的地方。看图片。

这是我的 HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Mobtech - Privatni korisnici </title>

        <!--Ubaci bootstrap css -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="css/basic-template.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

    </head>
    <body>
        <!--Navigation bar -->
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
                        <span class="sr-only"> Pokazi i sakrij navigaciju </span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                         <span> <img src="Slike/logo.png" alt="LogoSlika"/> </span>
                        <font face="Roboto Condensed" size="4" color="green"> Mobtech </font>
                    </a>
                </div> 
                <div class="collapse navbar-collapse" id="navbar-container">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="index.html"> Početna strana </a> </li>
                        <li class="active"><a href="#"> Privatni korisnici </a> </li>
                        <li><a href="poslovni.html"> Poslovni korisnici </a> </li>
                        <li><a href="uredjaji.html"> Uređaji </a> </li>
                        <li><a href="onama.html"> O Nama </a> </li>
                    </ul>
                </div>
            </div>
        </nav>

        <br />
            <div class="container"> <!--Container -->

                <div class="row">
                    <!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
                    <div class="col-lg-12 bg-success"> 
                        <p> Outer div </p>
                        <div class="col-lg-6 bg-primary">
                            <p> Inner div </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <footer class="mojFooter">
                <font face="Roboto Condensed" size="4"> <center>
                <div class="container">
                    <div class="row" style="margin-top: 7px;">
                         <p> &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &copy; Copyright Ivan Prošić 2016.</p> 
                    </div>
                    <div class="bottom-footer">
                        <div class="col-md-12"> 
                            <ul class="footer-nav">
                                <li> <a href="https://www.facebook.com/"> Facebook </a> </li>
                                <li> <a href="https://twitter.com/"> Twitter </a> </li>
                                <li> <a href="https://plus.google.com/"> Google+ </a> </li>
                            </ul>
                        </div>
                    </div>
                </div>
                </font> </center>
            </footer>



            <!-- JavaScript fajl -->
            <script src="js/jquery.min.js"></script>
            <!-- Kompresovan JavaScript fajl -->
            <script src="js/bootstrap.min.js"></script>
    </body>
</html>

这是我的 CSS，仅用于页脚：

    .mojFooter{
    background-color: #f8f8f8;
    color: #00a651;
    padding-top: 0px;
    border-top: 1px solid #e7e7e7;
    margin-bottom: 0px;
}

.bottom-footer{
    border-top: 1px solid #00a651;
    margin-top: 0px;
    padding-top: 7px;
    color: #00a651;

}

.footer-nav li{
    display: inline;
    padding: 0px 40px;
}

.footer-nav a{
    color: grey;
    text-decoration: none;
}

【问题讨论】：

也就是说，你希望页脚位于页面的末尾，而不是固定的，除非内容比浏览器窗口短，那么你希望它固定在底部页面的？
这里有我的答案stackoverflow.com/a/24916228/1804107

标签： html css twitter-bootstrap

【解决方案1】：

当使用 bootstrap 4 或 5 时，可以使用 flexbox 来达到预期的效果：

<body class="d-flex flex-column min-vh-100">
    <header>HEADER</header>
    <content>CONTENT</content>
    <footer class="mt-auto"></footer>
</body>

请查看示例：Bootstrap 4 Bootstrap 5

在 bootstrap 3 中且不使用 bootstrap。对于这个问题，最简单的跨浏览器解决方案是为body 对象设置一个最小高度。然后使用bottom: 0 规则为页脚设置absolute 位置。

body {
  min-height: 100vh;
  position: relative;
  margin: 0;
  padding-bottom: 100px; //height of the footer
  box-sizing: border-box;
}

footer {
  position: absolute;
  bottom: 0;
  height: 100px;
}

请检查这个例子： Bootstrap 3

【讨论】：

你是对的 - 我错过了身体的相对位置，最小高度应该是 100vh 而不是 100%...
您可以选择给正文一个padding-bottom 和页脚的高度，以防止页脚隐藏正文底部的内容。
@MrMiketheripper，它适用于原始要求 - 页脚需要“在页面末尾，而不是固定”。
我花了一整天的时间寻找合适的解决方案，终于找到了。谢谢，伙计！

【解决方案2】：

你可以添加 style="min-height:100vh" 到您的页面内容容器并将页脚放在另一个容器中

【讨论】：

这对我来说是最干净的实现，但我将其更改为 min-height: calc(100vh - [header-height]px - [footer-height]px); 效果很好。
这是最简洁的答案

【解决方案3】：

使用这个样式表：

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.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;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

【讨论】：

【解决方案4】：

就我的 Bootstrap4 而言：

<body class="d-flex flex-column min-vh-100">
    <div class="wrapper flex-grow-1"></div>
    <footer></footer>
</body>

【讨论】：

你是英雄！
我有没有提到我喜欢 flexbox？这是一个绝妙的解决方案。
对于引导程序，这是最有意义的！谢谢！
赞成，因为这使用引导程序并且不需要额外的 CSS
真的很棒。但请注意，当使用 laravel 删除
时，它也可以在没有包装类的情况下正常工作。

【解决方案5】：

<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
  <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>

<ul class="nav col-md-4 justify-content-end">
  <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
  <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
  <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
  <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
  <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
</ul>

【讨论】：

欢迎来到 Stack Overflow。当代码附有解释时，它会更有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请edit您的问题并解释它如何回答所提出的具体问题。见How to Answer。

【解决方案6】：

:root {
    --text: #daf7a6;
    --header: #581845;
    --main: #900c3f;
    --footer: #ff5733;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

header,
main,
footer {
    color: var(--text);
    height: 100px;
    padding: 1rem;
}

header {
    background-color: var(--header);
}

main {
    background-color: var(--main);
}

footer {
    background-color: var(--footer);
    position: sticky;
    top: 100vh;
}

<header>header</header>
<main>content</main>
<footer>footer</footer>

【讨论】：