Question

在小型移动设备中，我的粘性页脚下面有这个空白区域。例如，在iPhone SE＆＃39;中查看屏幕尺寸。

我在bootstrap示例中使用了同样的页脚和css，但无法使空格消失。

我认为这是因为我的文字很长，然后我使用媒体查询添加了页脚高度，但它并不好看。我不知道如何解决它。任何指导都将不胜感激。

＆＃13;

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;

}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
  text
}
.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: #0000ff
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}


.text-muted {
    color: #fff!important;
}

＆＃13;

<!DOCTYPE html>
<!-- saved from url=(0057)https://getbootstrap.com/docs/4.0/examples/sticky-footer/ -->
<html lang="en" class="gr__getbootstrap_com"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://getbootstrap.com/favicon.ico">

    <title>Sticky Footer Template for Bootstrap</title>


    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
	<link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="assets/css/dashboard.css" rel="stylesheet">
    <link href="assets/css/sticky-footer.css" rel="stylesheet">
</head>

  <body data-gr-c-s-loaded="true">

    <!-- Begin page content -->
    

    <footer class="footer">
      <div class="container">
        <span class="text-muted">This is a test to check this sticky footer. This footer breaks in small screens.</span>
      </div>
    </footer>


<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery-3.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="assets/js/popper.js"></script>
    <script src="assets/js/bootstrap.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
  

</body></html>

＆＃13;

Answer 1

出现此问题是因为在小屏幕上，页脚分为两行，并且由于您设置了line-height:60px，因此总计120px，这会克服60px高度设置。

您可以使用media queries处理，也可以设置overflow:hidden;（不是最佳解决方案），或将line-height替换为padding。

以下是媒体查询的示例。（使用您的文字，问题出现在514px左右）

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;

}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
  text
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #0000ff
}

@media all  and (min-width: 514px){
    .footer {
        /* Set the fixed height of the footer here */
        height: 60px;
        line-height: 60px; /* Vertically center the text there */
    }
}

@media all  and (max-width: 514px){
    .footer {
        padding: 10px 0;
    }
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}


.text-muted {
    color: #fff!important;
}

<!DOCTYPE html>
<!-- saved from url=(0057)https://getbootstrap.com/docs/4.0/examples/sticky-footer/ -->
<html lang="en" class="gr__getbootstrap_com"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://getbootstrap.com/favicon.ico">

    <title>Sticky Footer Template for Bootstrap</title>


    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
	<link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="assets/css/dashboard.css" rel="stylesheet">
    <link href="assets/css/sticky-footer.css" rel="stylesheet">
</head>

  <body data-gr-c-s-loaded="true">

    <!-- Begin page content -->
    

    <footer class="footer">
      <div class="container">
        <span class="text-muted">This is a test to check this sticky footer. This footer breaks in small screens.</span>
      </div>
    </footer>


<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery-3.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="assets/js/popper.js"></script>
    <script src="assets/js/bootstrap.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
  

</body></html>

在iPhone上的Bootstrap 4中删除粘性页脚下的空白区域

1 个答案: