如何将div的高度动态设置为屏幕的高度，直到滚动条到达屏幕底部答案

【问题标题】：How to set height of a div to height of the screen dynamically till the scrollbar reach bottom of the screen如何将div的高度动态设置为屏幕的高度，直到滚动条到达屏幕底部
【发布时间】：2017-01-16 00:41:50
【问题描述】：

我正在尝试为新闻提要设置一条垂直线，并且我正在寻找一种解决方案，以在滚动条动态到达屏幕底部时使其高度等于屏幕，因为新闻提要中的项目将在滚动时动态加载.

我尝试使用 100vh 和 100% 但高度固定为视口的高度。

这里是 div：

<div class="verticalLineFeed">
</div>

div 的 CSS ：

.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
margin-top: 65px;
}

在 css3 或 jquery 中执行此操作的任何想法都会有所帮助

代码片段：

.verticalLineFeed {
  width: 2px;
  height: 100%;
  border-left: 5px solid #cdcdcd;
  position: absolute;
  margin-left: 32px;
}
.main {
  width: 100%;
  height: 2000px;
  }

<div class="verticalLineFeed">
</div>
<div class="main">
</div>

【问题讨论】：

你试过min-height: 100vh吗？
是的，那没用
那么你需要发布一个最小的代码sn-p来重现这个问题，否则我们除了猜测之外没有机会
@LGSon 创建...
从.main 中删除height: 2000px 似乎可行？

标签： javascript jquery html css viewport

【解决方案1】：

使用wrapper 并将其设置为position: relative

.wrapper {
  position: relative;
}
.verticalLineFeed {
  width: 2px;
  height: 100%;
  border-left: 5px solid #cdcdcd;
  position: absolute;
  margin-left: 32px;
}
.main {
  width: 100%;
  height: 2000px;
  }

<div class="wrapper">
  <div class="verticalLineFeed">
  </div>
  <div class="main">
  </div>
</div>

或者将position: relative 设置为body（虽然还没有在所有浏览器上测试过）

body {
  position: relative;
}
.verticalLineFeed {
  width: 2px;
  height: 100%;
  border-left: 5px solid #cdcdcd;
  position: absolute;
  margin-left: 32px;
}
.main {
  width: 100%;
  height: 2000px;
  }

  <div class="verticalLineFeed">
  </div>
  <div class="main">
  </div>

【讨论】：

【解决方案2】：

我有办法做到这一点

$(document).ready(function() {
  function setHeight() {
  windowHeight = $('.main').innerHeight();
  $('.verticalLineFeed').css('height', windowHeight);
  };

  setHeight();

  $('.main').resize(function() {
  setHeight();
  });
});

代码片段：

$(document).ready(function() {
  function setHeight() {
    windowHeight = $('.main').innerHeight();
    $('.verticalLineFeed').css('height', windowHeight);
  };
  setHeight();
  
  $('.main').resize(function() {
    setHeight();
  });
});

.verticalLineFeed {
  width: 2px;
  height: 100%;
  border-left: 5px solid #cdcdcd;
  position: absolute;
  margin-left: 32px;
}
.main {
  width: 100%;
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="verticalLineFeed">
</div>
<div class="main">
</div>

【讨论】：

好吧，我贴了两个示例，每个示例都比使用脚本效率高得多，我建议您在有 CSS 方式时不要使用它