Удалите пустое пространство под липким нижним колонтитулом в Bootstrap 4 на iPhone - PullRequest
Новая
       10

Удалите пустое пространство под липким нижним колонтитулом в Bootstrap 4 на iPhone

0 голосов
/ 26 апреля 2018

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

Я использовал те же самые нижний колонтитул и CSS из примеров начальной загрузки, но не смог убрать пробелы.

Я думал, что это происходит из-за того, что мой текст длинный, затем я добавил высоту нижнего колонтитула с помощью медиа-запросов, но это не выглядит хорошо. Я не знаю, как это исправить. Любое руководство будет с благодарностью. 

/* 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;
}
<!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>

1 Ответ

0 голосов
/ 26 апреля 2018

Эта проблема возникает из-за того, что на маленьких экранах нижний колонтитул разбивается на две строки, и так как вы установили line-height:60px, то в итоге получается 120px, что превышает набор высоты 60px.

Вы можете справиться с медиа-запросами , либо установив overflow:hidden; (не самое лучшее решение), либо заменив line-height на padding.

Вот пример с медиа-запросами. (с вашим текстом проблема появляется около 514 пикселей) 

/* 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...