Help with a flexbox issue where it squishes everything even though i have a max-width container

HTML & CSS
,
1

Hi.

I have a site which requires a sticky footer and a max-width container as well as on one page a 100vh hero. It all worked fine until i added the max-width container. Please can someone help me understand the reason why this isn’t working and a solution.

Thanks.

Working: Sticky Footer code w/ no container

Working: Sticky footer and 100vh flex hero image

Broken: I add the max-width container
https://jsfiddle.net/n8rzau36/

Any help in finding a solution would be greatly appreciated.

HTML

<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>

CSS

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%;
}

Thanks

2

Hi,

I’m not quite sure if I have understood you correctly but if the hero is 100vh then you won’t see the sticky footer because it is below the fold and the hero fills the viewport. If you want the hero to be the height of the viewport less the sticky height then you can still do that with flexbox.

e.g.

Avoid using fixed heights as that means the element can never grow. Use a min-height instead and that will ensure content can grow. Also avoid height:100% as it will never do what you want unless you have an unbroken chain of parents with height defined all the way back to the root element. (That’s one of the reasons that the 100vh unit is so useful in that you can reference a viewport height easily from nested elements.)

If you did want the hero to 100% of the viewport then set a min-height:100vh on the main element and on the section element,

It all depends on exactly what you want to achieve :slight_smile:

2 Likes
3

Hi,

Thankyou so much for the reply.

Basically it was kinda me just wanting to have one page that does all type thing so all my pages are required a sticky footer etc. and the homepage for now needs a 100vh hero but in the future it might not do i just wanted something where if i were to take out the hero the sticky slider is just there.

I did find a solution that seems to work however i thought i would run it past you about whether or not it has been done correctly etc.

Thanks in advance

Full height hero:

Secondary page

4

Yes that’s much along the lines of what I was saying and should do the job for you nicely. :slight_smile:

You can remove this line though:

html, body {
  min-height: 100%;
}

That rule has no effect at all.

(Take a deep breath)
You can only base a percentage height on a parent that has height defined (other than auto). You cannot either base percentage heights on elements that have min-height defined using percentages.

The rule above is saying that first you want the html element to be a min-height of 100%. The html element already covers the viewport so the min-height has no real effect anyway. You then give the body a min-height in percentage but percentage heights cannot be obtained from a parent that doesn’t have a height defined (min-height doesn’t count).

Therefore commonly before vh units were invented the method was to give the html element a height of 100% and then give the body a height of 100% and then the first wrapper in your page could use a min-height:100% to full effect. That was the reasoning from long ago :slight_smile: (of which I was a pioneer)

Effectively you were fixing the html and body to 100% height only and then letting the child wrapper overflow out of the body. This was fine and worked well but not well understood. If you had applied overflow:hidden to the body all content below the fold would then have disappeared.

Luckily these days we do no need to add any height or min-heights to the html and body as we can simply use the vh unit on the element concerned when we want a full viewport height (min-height:100vh).The last thing to consider is that 100vh means a full viewport height so if you apply it to an element that is not naturally at the top of the viewport then it will extend below the viewport.

4 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.