Question

我正在尝试为新闻Feed添加一条垂直线，我正在寻找一种解决方案，当滚动条动态到达屏幕底部时，它的高度等于屏幕，因为新闻Feed中的项目将动态加载到滚动条

我尝试使用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>

Answer 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>

Answer 2

我有办法做到这一点

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

  setHeight();

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

代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: