时间戳

首页 > 解决方案 > 如何使可滚动的 div 的高度动态化？

javascript - 如何使可滚动的 div 的高度动态化？

问题描述

我正在尝试构建一个具有定义高度的部分。在本节中，有一个粘性标题（其高度可能会增加）和一个正文。我想要的是使正文可滚动。但由于标题的动态高度，我不能给它一个确切的高度！我该怎么办？？

<div class="section">
    <div class="header"></div>
    <div class="body"></div>
</div>

.section{
    height: 100vh;
    overflow: hidden;   
    position: relative;
}
.header{
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}
.body{
    // height: ???;
    overflow-y: auto
}

我可以给出该部分overlfow-y: auto，但它会在整个部分（甚至在标题中）显示滚动，但我只希望正文是可滚动的，并且整个部分的高度必须是窗口高度（100vh）

标签： javascripthtmlcss

解决方案

我将<body>toheight: 100vh和 div 设置为bodytoheight: 100% 和.sectionto类height: 100%。

我还补充说：

* {
   margin: 0;
   padding: 0;
}

从所有元素中删除所有填充和边距，以防止<body>. 这种组合允许标题和主要内容部分都具有动态高度。

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
}

.section {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  border-bottom: 1px solid red;
}

.body {
  height: 100%;
  overflow-y: auto
}
<div class="section">
  <div class="header">Header</div>
  <div class="body">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed convallis purus, iaculis tempor lorem. Praesent rhoncus mi blandit pellentesque hendrerit. Donec tincidunt congue metus, in molestie orci suscipit eget. Orci varius natoque penatibus
      et magnis dis parturient montes, nascetur ridiculus mus. Sed malesuada ex quis eros elementum bibendum. Fusce sodales semper nibh, laoreet dapibus felis cursus eu. Donec gravida sit amet sem quis molestie. Sed odio neque, tincidunt sit amet eros
      ac, molestie varius velit. Suspendisse et velit eget nunc posuere tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer pharetra, ligula eu pretium bibendum, magna nibh iaculis tellus, non
      malesuada odio lacus nec magna. Aliquam elementum fermentum ultricies. Donec sed nibh sed mauris congue eleifend a sed dui. In hac habitasse platea dictumst. Curabitur ultrices felis ut molestie viverra. Pellentesque dignissim tempus tortor a auctor.
      Duis lorem lacus, luctus pulvinar scelerisque a, ultrices vitae massa. Suspendisse imperdiet diam velit, non iaculis dolor euismod in. Sed tincidunt euismod nisl, eu sodales sapien malesuada ac. Vestibulum in consequat leo. Phasellus rhoncus augue
      id nisl pretium feugiat. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris tincidunt pulvinar nulla. Nulla facilisi. Nulla finibus a mi eget lobortis. Etiam laoreet dui
      at porttitor pharetra. Duis vel nisi enim. Aenean consequat vitae felis vel euismod. Morbi pharetra tristique massa, quis ultrices tortor viverra et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec
      dapibus ultrices nisl, vitae commodo magna mollis et. Sed nibh turpis, facilisis at magna vitae, semper ultricies mi. Maecenas non ante rhoncus, semper ipsum vitae, tempor ligula. Quisque lorem libero, commodo sit amet nisl vitae, sodales lobortis
      neque. Maecenas sagittis sapien eu scelerisque consequat. Maecenas nec porttitor felis. Fusce dignissim elementum elit vitae fringilla. Integer auctor elementum dui et auctor. Sed sit amet dui dui. Ut nunc arcu, venenatis at sem sit amet, ullamcorper
      luctus erat. Donec ut pellentesque ipsum, id pellentesque enim. Aenean in justo tincidunt, sollicitudin quam a, varius erat. Suspendisse ante massa, viverra in lacus in, eleifend sollicitudin risus. Morbi dignissim porttitor varius. Integer eu dolor
      vel elit consequat vulputate. Donec sagittis et leo ac molestie. Donec odio orci, scelerisque in nisl a, interdum condimentum eros. Nulla at tortor lacus. Quisque condimentum maximus purus at luctus. Quisque vel consectetur justo, id efficitur nunc.
      Etiam consequat est a neque vulputate consequat. Aliquam et odio bibendum, mollis tortor rutrum, porttitor massa. Donec dignissim ligula justo, sed aliquet lorem finibus in. Sed vel velit bibendum urna bibendum faucibus vitae eget odio. Fusce dapibus
      enim eros. In hac habitasse platea dictumst. In varius maximus eleifend. Suspendisse ut sodales risus. Phasellus bibendum scelerisque ex sit amet maximus.
    </div>
  </div>
</div>

推荐阅读