时间戳

首页 > 解决方案 > 在未知大小的非固定标题下方填充剩余屏幕高度

html - 在未知大小的非固定标题下方填充剩余屏幕高度

问题描述

我想实现下面代码片段的布局：

这个片段的问题在于，它完全破坏了 HTML 的语义层次结构。将#uglyWrapper文章分为两部分。

我可以使用 #title { height: calc(100vh - $nav-height) }，但顶栏本身就是一个 flexbox。所以$nav-height不为人知。

是否有一个纯 CSS 的解决方案，它不会与这个 HTML 结构混淆：

body
    nav
    article
        #title
        text

片段演示，它应该是什么样子：

#uglyWrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#title {
  background-color: lightblue;
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

nav {
  background-color: grey;
}
<body>
  <div id="uglyWrapper">
    <nav>top nav with unknown height, not fixed</nav>
  <!--  article -->
    <div id="title">Full height title image</div>
  </div>
  Article continues <br>
  much text <br>
  much text <br>
  much text
  <!-- /article -->
</body>

解决mfluehr 的答案：

这种方法不会填满剩余的空间。相反，它会填充整个屏幕高度并被标题栏剪裁。我故意离开了关于图像的细节，而不是要求一个 div。因为该 div 中还有其他元素，所以需要精确的布局。所以覆盖一个未知大小的区域是有问题的。请不要停留在图像的细节上并使用最小的示例。我可以从那里开始工作。

标签： htmlcss

解决方案

将绝对定位应用于<nav>. 由于标题图像将使用object-fit: cover，因此顶部的块是否被导航覆盖并不重要。

#title {
  background-color: lightblue;
  height: 100vh;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

nav {
  background-color: grey;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
<body>
  <nav>top nav with unknown height, not fixed</nav>
  <article>
    <div id="title">Full height title image</div>
    much text <br>
    much text <br>
    much text
  </article>
</body>

推荐阅读