Разрыв содержимого вне контейнера (на мобильном устройстве), когда я использую класс h-100 - PullRequest
Новая
       12

Разрыв содержимого вне контейнера (на мобильном устройстве), когда я использую класс h-100

0 голосов
/ 06 июля 2018

Возникли проблемы с загрузкой 4.0. Я пытаюсь использовать h-100, чтобы фон доходил до нижней части экрана пользователя.

Я возился с clearfix, fluid-containers и т. Д., Чтобы заставить его работать, но не повезло.
Проблема в том, что когда пользователь заходит на эту страницу на мобильном телефоне, карусель вырывается из контейнера и над моим нижним колонтитулом, делая ее довольно ужасной.

Это происходит только тогда, когда я использую h-100, с его удалением проблем нет, но я бы хотел использовать h-100 или эквивалентный, а не обходной путь, такой как добавление дополнительного содержимого на страницу. 

<div class="text-white bg-secondary d-flex p-3 h-100">
    <div class="container-fluid">
      <div class="row">
        <div class="align-self-center text-center p-3 col-md-6">
          <h1 class="mb-4" style="font-size:325%;">Browse my work</h1>
          <p class="mb-4" style="font-size:135%;">I have done work with a non-profit in the past where I developed several of the main pages that are currently being used by the company. It also includes some past projects and mockups. To checkout the work with the nonprofit click the button
            below!</p>

          <a class="btn btn-outline-light btn-lg" href="https://community-alert.org/aboutUs.html" target="_blank">View my non-proft work! </a>
        </div>

        <div class="align-self-center col-md-6 p-0">
          <div data-ride="carousel" id="myCarousel" class="carousel slide w-100 d-flex">

            <!-- Indicators -->
            <div class="carousel-inner" role="listbox">

              <div class="carousel-item active">
                <img src="images/portfolio4.png" atl="first slide" class="d-block w-100"> </div>

              <div class="carousel-item">
                <img class="d-block w-100" src="images/portfolio5.png" data-holder-rendered="true"> </div>

              <div class="carousel-item">
                <img class="d-block w-100" src="images/portfolio8.png" data-holder-rendered="true"> </div>

            </div>

            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon"></span>
              <span class="sr-only">Previous</span>
            </a>

            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon"></span>
              <span class="sr-only">Next</span>
            </a>

          </div>
        </div>
      </div>
    </div>
  </div>

This is an image of the problem

1 Ответ

0 голосов
/ 07 июля 2018

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

Ответ: По сути, использование h-100 может разрушить контейнер при просмотре страницы на мобильном устройстве, может быть, строго в iOS, поскольку они не могут правильно отобразить h-100 вручную. Тем не менее, причина, по которой я нуждался в h-100, заключалась лишь в том, чтобы заполнять фон на больших рабочих столах, поскольку на странице не хватало содержимого, чтобы нижний колонтитул находился ниже экрана при загрузке. ПРИМЕЧАНИЕ: мне нужен был только h-100 на настольных компьютерах, поэтому все, что мы сделали, это добавили внутренний медиазапрос, чтобы получить ширину экрана. Если экран был достаточно маленьким, нам не нужен h-100.

Вот код медиазапроса: 

<style>
  @media only screen and (min-width: 900px)
  {
    .myh-100
    {
      height: 100%;
    }
  }
</style>

PS - теги стиля присутствуют, потому что я держу этот запрос в заголовке документа.

...