html - CSS:在没有绝对位置的网页上制作 "overflowable"段

Question

我的页面上有标题和内容。内容应在其自己的部分内滚动，以便用户可以滚动浏览内容中的所有文本而不会忘记标题。

这可以通过代码实现:

  position: absolute;
  overflow-y:scroll; 

但是，这会导致内容与标题重叠。所以，我定义了 top:80px; 但这只适用于特定的屏幕尺寸。如果您缩小窗口，标题将再次与内容重叠。

我希望内容刚好在标题下方开始，而且还具有可滚动而不会丢失标题 View 的属性。

这是我当前设置的 fiddle : https://jsfiddle.net/14zckot2/6/

编辑 1

添加:

  max-height: 100vh;
  overflow-y:scroll;

代替

  position: absolute;
  overflow-y:scroll; 

工作除了溢出应该从窗口底部开始，而是它从窗口底部以下开始(它在窗口底部以下的量等于标题的高度)。

如何将 max-height 设置为等于窗口的高度 - 标题的高度，或者相当于内容开始和结束之间的距离 window ？

Answer 1

您必须为 content 指定一些最大高度并移除 position:absolute。这样它就不会与标题重叠。

#header {
  font-size: 30px;
}
#content {
  text-align: center;
  padding: 20px;
  color: #000;
  clear: both;
  bottom: 0px;
  top: 80px;
  left: 0%;
  right: 21%;
  overflow-y: scroll;
  overflow-x: scroll;
  max-height: 80px;
}

<div id=header>
  This is my header and its size sometimes fits and sometimes doesnt depending on screen width
</div>
<div id=content>
  This is my paragraph This is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my
  paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis
  is my paragraphThis is my paragraphThis is my paragraph This is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis
  is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis
  is my paragraphThis is my paragraphThis is my paragraphThis is my paragraph This is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis
  is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis
  is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraph

</div>