html - 根据固定 sibling 设置高度

Question

我有一些代码几乎可以完美运行。我有以下要求:

• 固定在视口(viewport)顶部和底部的带有相同文本的横幅。
• childContent 应该在内容溢出超出可用空间而不移动横幅时滚动
• 滚动条位于 #contentContainer 内，而不是整个视口(viewport)内。
• #window-container div 应该能够存在于视口(viewport)中的任何大小的 div 中。它不会总是填满屏幕。

如果您要像现在一样更改 numberOfParagraphs 和您的视口(viewport)，这将非常有效。

https://codepen.io/anon/pen/QYVNbd

但是，横幅文本的长度是可变的。当文本超过一行时，使用 calc(100% - 3em) 不起作用，因为两个横幅的高度现在是 6em。您可以通过取消注释 JS 的第 7 行来看到这一点。底部横幅现在被推离屏幕。

---

当横幅中的文本超过 1 行时，如何防止底部横幅被推离屏幕？

我进行了广泛的搜索，calc(100% - 3em) 是我不断返回的答案。

如果可能的话，我想找出一个纯 HTML/CSS 的解决方案，不包括 js/jquery。

---

最终解决方案

https://codepen.io/anon/pen/yZxrmg

这主要是 kukkuz's solution使用 flex 盒。我还为横幅添加了相对字体大小，因此当整体尺寸小得多时它不会超过内容。

您可以调整段落数并验证横幅是否位于视口(viewport)底部。此外，水平滚动也很完美。 (取消注释第 23 行)。

Answer 1

你可以在这里使用 flexbox 布局:

1. 让你的window-container成为一个column flexbox with viewport height(你可以删除calc 在 contentContainer 上设置高度并添加 flex: 1)

2. 同时将 margin: 0 设置到 body 元素以重置默认边距并防止边距折叠 和里面的 p 元素的边距。

请看下面的演示:

var bannerText = "Demo Application";
var numberOfParagraphs = 8;
/**
 * Change the length of the banner so it runs to the second line
 * You might need to adjust your screen width
 */
bannerText = "Fixed Alert with super long footer that will eventually run off the screen and onto the next line. If we don't handle this, the footer will get pushed off the screen";

var banners = document.getElementsByClassName("bar-text");
for (var i = 0; i < banners.length; i++) {
  banners[i].innerHTML = bannerText;
}

// This just generates an amount of paragraphs to test the vertical resizing
var text =
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

var returnArray = ["<p>" + text + "</p>"];
/**
 * Check how horizontal scrolling looks
 * The content moves, but the banners stay fixed
 */
// returnArray = ['<p style="width: 200%">' + text + '</p>']

for (var i = 1; i < numberOfParagraphs; i++) {
  returnArray.push("<p>" + text + "</p>");
}
document.getElementById("childContent").innerHTML = returnArray;

body {
  margin: 0; /* ADDED */
}

.window-container {
  position: fixed;
  height: 100vh; /* ADDED */
  display: flex; /* ADDED */
  flex-direction: column; /* ADDED */
}

.navbar {
  position: relative;
  padding: 0;
  background: grey;
  width: 100%;
}

.bar-text {
  margin: auto;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

#contentContainer {
  position: relative;
  overflow: auto;
  flex: 1; /* ADDED */
  /*height: calc(100% - 3em);*/
  /* For non-scrolling content */
  /* overflow: hidden; */
}

#childContent {
  padding: 0.5em;
}

<div class="window-container">
    <div class="navbar">
      <div class="bar-text"></div>
    </div>

    <div id="contentContainer">
      <div id="childContent">

      </div>
    </div>

    <div class="navbar">
      <div class="bar-text"></div>
    </div>
  </div>