Question

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

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

如果您要更改numberOfParagraphs和现在的视口，那么效果很好。

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

但是，横幅文本将是可变长度的。当文本多于一行时，无法使用calc(100% - 3em)，因为两个横幅的高度现在为6em。您可以通过取消注释JS的第7行来查看此内容。现在，底部的横幅广告被推离了屏幕。

当横幅中有多行文字时，如何防止底部横幅被推离屏幕？

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

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

最终解决方案

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

这主要是使用flexbox的kukkuz's solution。我还在横幅中添加了相对字体大小，以便在整体大小小得多时不会超过内容。

您可以播放段落数，并确认横幅停留在视口的底部。同样，水平滚动也可以完美地工作。（取消注释第23行）。

Answer 1

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

使您的window-container为列 flexbox，并设置视口高度（您可以删除在calc上设置的高度contentContainer并添加flex: 1）
还将margin: 0的{{1}}元素设置为重置默认边距，并防止边距塌陷与{里面有{1}}个元素。

请参见下面的演示

body

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;

Answer 2

您可以通过使用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" />

请注意，请使用按钮会引发错误。

希望您对此有帮助。

和平

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

最终解决方案

2 个答案: