垂直居中容器内的盒子，直到达到极限

Question

这是一张图表：

我正在尝试制作一个带有横幅（灰色框）且高度为 80vh（如果可能）的网页。

此横幅包含一个 div，其中的文本（蓝色框）必须在此横幅内垂直居中。

此外，我有一个导航菜单，高度为 100px（粉红色的线），这个菜单绝对定位在横幅的顶部。

如何获得蓝框垂直居中但不能越过导航菜单（粉线）且横幅（灰框）不能小于蓝框高度的布局 +导航菜单的高度？

我希望我能在 CSS 中获得这个结果。

这是部分布局的代码：

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("https://picsum.photos/id/1015/1920/1080");
  height: 80vh;
  min-height: 100px; /* + the box inside :( */
}

nav {
  position: absolute;
  top: 0;
  width: 100%;
  border-bottom: solid 4px #f5989d;
  height: 100px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav li {
  float: left;
}

nav a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}

.content {
  font-size: 18px;
  color: white;
  text-align: center;
  max-width: 400px;
  padding: 20px;
  background: #6dcff6dd;
  border: solid 1px black;
}

<section class="banner">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</section>

Answer 1

不确定是否有可能只满足 CSS 的所有要求，所以这里尝试满足几乎所有要求（只缺少最后一个）。我会简单地考虑 position:sticky

html, body {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}


.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("https://picsum.photos/id/1015/1920/1080");
  height: 80vh;
  min-height: 100px; /* + the box inside :( */
}

nav {
  position: absolute;
  top: 0;
  width: 100%;
  border-bottom: solid 4px #f5989d;
  height: 100px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav li {
  float: left;
}

nav a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}

.content {
  font-size: 18px;
  color: white;
  text-align: center;
  max-width: 400px;
  padding: 20px;
  background: #6dcff6dd;
  border: solid 1px black;
  /* the trick start here */
  position:sticky;
  top:100px;
  margin:-100px auto;
}

<section class="banner">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</section>

您可以像下面这样直观地破解最后一个要求：

html, body {
  margin: 0;
  padding: 0;
}  
* {
  box-sizing: border-box;
}

.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("https://picsum.photos/id/1015/1920/1080") fixed;
  height: 80vh; 
  min-height: 100px; /* + the box inside :( */
}

nav {
  position: absolute;
  top: 0;
  width: 100%;
  z-index:2;
  border-bottom: solid 4px #f5989d;
  height: 100px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav li {
  float: left;
}

nav a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}

.content {
  font-size: 18px;
  color: white;
  text-align: center;
  max-width: 400px;
  padding: 20px;
  background: #6dcff6dd;
  border: solid 1px black;
  /* the trick start here */
  position:sticky;
  top:100px;
  margin:-100px auto;
  transform-style:preserve-3d;
}

.content::before {
   content:"";
   position:absolute;
   bottom:-2px;
   top:0;
   left:-50vw;
   right:-50vw;
   background: url("https://picsum.photos/id/1015/1920/1080") fixed;
   transform:translateZ(-1px);
}

body  {
  overflow-x:hidden;
}

<section class="banner">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</section>

垂直居中容器内的盒子，直到达到极限

Vertically center a box inside a container until it reach a limit

html

css

flexbox

responsive-design

css-grid