一个 flexbox 问题，即使我有一个最大宽度的容器，它也会挤压一切

Question

我有一个网站，它需要一个粘性页脚和一个max-width容器，并且在一页上需要一个100vh的英雄。 在我添加max-width容器之前一切正常。 请有人帮我理解这不起作用的原因和代码解决方案。 也许这是缺乏完整的理解，但任何帮助将不胜感激。

我似乎无法让所有三个工作：粘性页脚、 max-width容器和100vh header 仅用于主页。

谢谢。

工作：无容器的粘性页脚代码https://jsfiddle.net/qta6cxfe/ 1

工作：粘性页脚和 100vh flex 英雄图像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>

Answer 1

我不完全清楚你想要完成什么。 我认为您只希望 .jack .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