html - 一个 flexbox 问题,即使我有一个最大宽度的容器,它也会挤压一切
问题描述
我有一个网站需要一个粘性页脚和一个max-width
容器,以及一个页面上的100vh
英雄。max-width
在我添加容器之前一切正常。请有人帮我理解这不起作用的原因和代码解决方案。也许这是缺乏完整的理解,但任何帮助将不胜感激。
我似乎无法让所有三个工作:仅用于主页的粘性页脚、max-width
容器和100vh
页眉。
谢谢。
工作:无容器的粘性页脚代码 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>
解决方案
我不完全清楚你想要完成什么。我认为您只想.jack-wrap
成为100vh
flex-column。因此,删除 html,body 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;
}
推荐阅读
- sql - Oracle SQL中如何统计属于一个用户的银行账户数量
- mongodb - 输入'文件
' 不可分配给类型 'Pick - java - 在 docker 上运行 java fie 返回错误
- javascript - 使用 split() 仅删除字符串中的最后一个 _?
- api - 循环 Power BI API 调用以提取未知数量的记录以避免速率限制?
- html - laravel dompdf 不能正确渲染带有 rowspan 和 colspan 的复杂 html
- python - send_keys 的 selenium 错误:str' 对象没有属性 'send_keys'
- elasticsearch - 更新 Elasticsearch _mapping 中的字符串参数
- swift - 如何使 user_target_xconfig pod install 警告静音
- python - Python:将图像发送到 Flask API 以存储在服务器上以供进一步使用