CODEWITHSUNDEEP
javascriptjqueryhtmlcssviewport
ManojGeek
ManojGeek

Reputation: 2001

How to set height of a div to height of the screen dynamically till the scrollbar reach bottom of the screen

I am trying to have a vertical line for a news feed and i am looking for a solution to make its height equal to the screen when scrollbar reach bottom of the screen dynamically as items in the news feed will be loaded dynamically on scroll.

I tried using 100vh and 100% but then height is fixed to the height of the viewport.

Here is the div :

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

CSS for the div :

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

Any idea for doing this in css3 or jquery will be helpful

Code Snippet : 

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

Upvotes: 0

Views: 230

Answers (2)

ManojGeek
ManojGeek

Reputation: 2001

I have got a way to do this 

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

  setHeight();

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

Code Snippet :

$(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>

Upvotes: 0

Asons
Asons

Reputation: 87191

Use a wrapper and set it to 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>

Or set position: relative to the body (haven't tested this on all browsers though)

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>

Upvotes: 1

Related Questions