根据固定兄弟姐妹设置高度

Question

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

具有相同文本的横幅固定在视口的顶部和底部。
childContent 应该在内容溢出超出可用范围时滚动 space 而无需移动横幅
滚动条位于 #contentContainer 内，而不是整个视口内。
#window-container div 应该能够在视口中以任何尺寸 div 存在。它不会总是填满屏幕。

如果您要像现在一样更改 numberOfParagraphs 和视口，则效果很好。

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

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

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

Answer 1

您可以通过对代码的页眉和页脚使用 position:sticky 轻松地做到这一点。

Javascript 代码不是必需的，我只是用它来创建动态页眉和页脚。

您可以找到更新的笔here。

var paraNum = 15;
var content =
  "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.";

function repeat(paraNum, content) {
  for (i = 0; i < paraNum; i++) {
    paraCount = i + 1;
    document.getElementById("contentContainer").innerHTML =
      document.getElementById("contentContainer").innerHTML +
      "<p>" +
      paraCount +
      ") " +
      content +
      "</p>";
  }
}
repeat(paraNum, content);


function addElement(parentId, elementTag, elementId, html) {
  var p = document.getElementById(parentId);
  var newElement = document.createElement(elementTag);
  newElement.setAttribute("id", elementId);
  newElement.innerHTML = html;
  p.appendChild(newElement);
}
function removeElement(elementId) {
  var element = document.getElementById(elementId);
  element.parentNode.removeChild(element);
}

body {
  display: flex;
  flex-direction: column;
  background: #222;
  height: 85vh;
  align-items: center;
  justify-content: center;
  font-family: monospace;
}
.windowContainer {
  background: rgba(222, 222, 222, 0.3);
  width: 80%;
  height: 70%;
  overflow-y: scroll;
}
#contentContainer {
  color: #ddd;
  padding: 0 1em;
  position: relative;
  z-index: 2;
}
#contentHeader {
  text-align: center;
  color: #222222;
  background: #dddddd;
  position: sticky;
  top: 0;
  z-index: 5;
}
#contentFooter {
  text-align: center;
  color: #222222;
  background: #dddddd;
  position: sticky;
  bottom: 0;
  z-index: 5;
}
input {
  width: 200px;
}

<input type="button" onclick="addElement('contentHeader', 'div', 'fixedHeadingLine','Header Line');" value="Add a Header Line" />
<input type="button" onclick="removeElement('fixedHeadingLine');" value="Remove a Header Line" />
<div class="windowContainer">
  <div id="contentHeader">Header Line</div>
  <div id="contentContainer">
    Content Heading
  </div>
  <div id="contentFooter">Footer Line</div>
</div>
<input type="button" onclick="addElement('contentFooter', 'div', 'fixedFooterLine','Footer Line');" value="Add a Footer Line" />
<input type="button" onclick="removeElement('fixedFooterLine');" value="Remove a Footer Line" />

Please do note that removing the original Header/Footer using the buttons throws an error.

希望对您有所帮助。

和平

Answer 2

您可以在此处使用 flexbox 布局：

将您的 window-container 设为列 flexbox 并具有 视口高度 （您可以删除 contentContainer 上设置的 calc 高度并添加 flex: 1)
同时将 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>

根据固定兄弟姐妹设置高度

Set height based on fixed siblings

html

css

css-position

最终解决方案