Question

我有一个问题，身高100％无法响应代码和图片，您将很好地理解问题

section {
  height: 100vh;
  background: #0e7ac3;
  top: 0;
  left: 0;
  width: 100%;
}


/* footer*/

#footer {
  background: #373948;
  color: white;
  padding: 15px;
}

<section>
  <div class="container-fluid">
    <!--container-->
    <img src="scripts/img/Dockies/Slider/intro.svg" class="img-fluid" alt="Responsive image" width="500px" height="500px" />
  </div>
  <!--end container-->
</section>



<!--Footer-->
<div class="container-fluid">
  <div class="row">
    <div class="col-12 text-center" id="footer">
      LINKPAN 2018 ©
    </div>
  </div>
</div>
<!--END Footer -->

这是问题所在 image show the Problem 该部分应推动页脚或下方彼此不重叠的任何元素谢谢^^

Answer 1

如果要将页脚粘贴在页面底部，首先需要使html，主体具有100％的高度，然后像下面的代码一样给页脚绝对位置。

html, body{
  height: 100%
}
#footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #373948;
  color: white;
  padding: 15px;
 }

Answer 2

您可以尝试这样的事情：

html：

<section>  </section>


<!--Footer-->
<div class="container-fluid">
    <div class="row">
            <div class="col-12 text-center" id="footer">
                LINKPAN 2018 © 
            </div>
        </div>
</div>
<!--END Footer -->

css：

section{
height: 100vh;
background: #0e7ac3;
top: 0;
left: 0;
width: 100%;
/* use your absolute url */
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/2000px-Vector-based_example.svg.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}


/* footer*/
#footer{
background: #373948;
color: white;
padding: 15px;
}

Answer 3

将页脚定位为absolute

html {
          position: relative;
          min-height: 100%;
        }
        body {
          /* Margin bottom by footer height */
          margin-bottom: 60px; //change according to the footer height
        }
        .footer {
          position: absolute;
          bottom: 0;
          width: 100%;
          /* Set the fixed height of the footer here */
          height: 60px; //change according to the footer height
          line-height: 60px; /* Vertically center the text there */
          background-color: #f5f5f5;
        }

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

了解更多bootstrap 4 footer

Bootstrap 4高度100％响应

3 个答案: