Проблема с флексбоксом, когда он сжал все, хотя у меня есть контейнер максимальной ширины - PullRequest
Новая
       17

Проблема с флексбоксом, когда он сжал все, хотя у меня есть контейнер максимальной ширины

0 голосов
/ 01 мая 2020

У меня есть сайт, на котором требуется липкий нижний колонтитул и контейнер max-width, а также на одной странице герой 100vh. Все работало нормально, пока я не добавил контейнер max-width. Пожалуйста, кто-нибудь может помочь мне понять причину, почему это не работает, и решение кода. Может быть, это отсутствие полного понимания, но любая помощь будет высоко ценится.

Я просто не могу заставить все три работать: липкий нижний колонтитул, max-width контейнер и 100vh заголовок только для домашней страницы.

Спасибо.

Работа: Код с привязкой нижнего колонтитула без контейнера https://jsfiddle.net/qta6cxfe/ 1

Работа: Липкий нижний колонтитул и 100vh flex image героя https://jsfiddle.net/1xumdnLb/

Сломано: я добавляю контейнер максимальной ширины https://jsfiddle.net/n8rzau36/

   html, body {
        height: 100%;
    }
    body {
        display: flex !important;
        flex-direction: column !important;
    }
    .watermark-top-section {
        position: relative;
        height: 100vh;
        min-height: 25rem;
        width: 100%;
        overflow: hidden;
    }
    .jack-wrap {
        max-width: 1540px;
        margin: 0 auto;
        position: relative;
        -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
        box-shadow: 0 0 20px 0 rgba(0,0,0,.15);
        height: 100%;
    }
<div class="jack-wrap">
      <main class="flex-shrink-0">
        <section class="d-flex flex-column justify-content-between watermark-top-section" id="hero">
          <div id="hero-top">
            <nav class="navbar navbar-light navbar-expand-md">
              <div class="container-fluid"><a class="navbar-brand" href="#"> </a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navcol-1">
                  <ul class="nav navbar-nav mx-auto">
                    <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Model S</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="#">Model X</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="#">Model 3</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="#">Roadster </a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="#">Energy </a></li>
                  </ul>
                  <ul class="nav navbar-nav">
                    <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Shop </a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="#">Sign In</a></li>
                  </ul>
                </div>
              </div>
            </nav>
            <h1 class="text-center aos-init aos-animate" data-aos="fade-up" data-aos-duration="700" data-aos-once="true" id="title">Tesla </h1>
            <h2 class="text-center aos-init aos-animate" data-aos="fade-up" data-aos-duration="700" data-aos-once="true" id="subtitle">Roadster </h2>
          </div>
          <div id="hero-bottom">
            <div class="container">
              <div class="row">
                <div class="col-8 offset-2">
                  <p>​The quickest car in the world, with record-setting acceleration, range and performance. </p>
                </div>
              </div>
              <div class="row">
                <div class="col aos-init aos-animate" data-aos="fade-up" data-aos-delay="400">
                  <p class="p-top"><i class="icon ion-speedometer"></i> 1.9s </p>
                  <p class="p-bot">0-60 mph </p>
                </div>
                <div class="col with-borders aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
                  <p class="p-top">+250mph </p>
                  <p class="p-bot">Top Speed</p>
                </div>
                <div class="col aos-init aos-animate" data-aos="fade-up" data-aos-delay="600">
                  <p class="p-top">620mi </p>
                  <p class="p-bot">Mile Range</p>
                </div>
                <div class="col align-self-center aos-init aos-animate" data-aos="fade-up" data-aos-offset="100px" data-aos-delay="700"><button class="btn btn-primary btn-block reserve-button" type="button">Reserve Now</button></div>
              </div>
              <div class="row">
                <div class="col"><button class="btn btn-link btn-block arrow-button" type="button"><i class="icon ion-ios-arrow-down"></i></button></div>
              </div>
            </div>
          </div>
        </section>
        content
      </main>
      <footer class="footer pb-3 mt-auto watermark-footer">
        <div class="container-fluid">
          <div class="row text-center text-sm-left align-items-sm-center">
            <div class="col-sm-3">
              <p class="text-sm mb-0">im a sticky footer</p>
            </div>
            <div class="col-sm-9 text-right"></div>
          </div>
        </div>
      </footer>
    </div>

1 Ответ

0 голосов
/ 01 мая 2020

Мне не совсем понятно, чего вы пытаетесь достичь sh. Я думаю, что вы хотите, чтобы .jack-wrap было 100vh, а также flex-column. Поэтому снимите html, тело CSS. 

.jack-wrap {
    display: flex;
    flex-direction: column;
    max-width: 1540px;
    margin: 0 auto;
    height: 100vh;
    position: relative;
    -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
}

.watermark-top-section {
    position: relative;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
}

Демо: https://codeply.com/p/nDDP5gOu9B

...