-1

So i tried to find a solution myself, but i couldn't find a topic with a solution that worked for me, because i have special prerequisites.

My Problem is the following: I have a sticky DIV element on the left, put in another DIV Element with a fixed height, because the sticky effect didn't work without fixed height. On the right are many elements which are in a DIV Container as well. This Container gets its height by the number of elements.

The optimal way would be, that the sticky element stops after the DIV Container with all his content elements is done. Yet because i have to set a fixed height for the Container of the sticky element, it keeps on taking its full height as white space before there can be any other content again.

I hope it wasn't explained to bad.

alert("The height is " + $("#ProductContainer").height());
#StickyContainer {
  float: left;
  height: 4000px;
  width: auto;
}

.sidebar {
  top: 0px;
  float: left;
  height: 400px;
  width: 200px;
  padding-left: 10px;
  padding-top: 20px;
  border: 2px solid black;
  margin: 20px 10px 0px 5px;
  position: -webkit-sticky;
  position: sticky;
}

.content {
  float: left;
  width: 200px;
  height: 300px;
  padding: 10px;
  margin-top: 20px;
  margin-left: 5px;
  border: 2px solid red;
}

#Test {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="StickyContainer">
  <div class="sidebar">
    This is the sticky sidebar
  </div>
</div>
<div id="ProductContainer">
  <div class="content">
    One of many boxes
  </div>
  <div class="content">
    Here are 2, but in reality there are more than 10
  </div>
</div>
<div style="clear:both" ;></div>
<div id="Test"> Here is the next content </div>

Note: Run in fullscreen, otherwise the #ProductContainer will be under the sidebar anyway.

I took many approaches, one was to take the height of the #ProductContainer with jQuery, then set the result as the new height for the #StickyContainer. Sadly it returns the height 0.

Didn't get much further because of the result. I tried much more of the stuff i found on StackOverflow, but nothing seemed to work. Not only with JavaScript, but also with HTML since the problem seems to be in the ProductContainer that is not embracing the content properly.

However, even if its just a simple stupid mistake of mine, i am thankful for any sort of help.

AlphaLeviathan
  • 91
  • 11
  • change ProduktContainer to ProductContainer – Victor Stoddard Jul 02 '18 at 16:28
  • saw the spelling mistake and corrected it, doesn't fix the problem though :( – AlphaLeviathan Jul 02 '18 at 16:30
  • 2
    Did you try putting `overflow:hidden;` on #ProductContainer? – git-e-up Jul 02 '18 at 16:48
  • Yeah, getting the height of StickyContainer works a well. Keep in mind there are usually multiple lines of "content" elements, so the height of #ProductContainer should be multiple times 300 (depending on the number of "content elements". I only cut it down to 2 so its not to confusing. But thanks for your help in advance :) – AlphaLeviathan Jul 02 '18 at 16:51
  • 1
    overflow: hidden; gave a reasonable output. Now that i got the height, i might be able to use it to give the new height to the StickyContainer. – AlphaLeviathan Jul 02 '18 at 16:55

1 Answers1

0

the content element hast a float and makes the ProductContainer feels nothing inside.

you have to use a clearfix class on parent.

.clearfix:after { 
    content: " "; 
    display: block;
    clear: both;
}

cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

and give the class to parent

<div id="ProductContainer" class="clearfix">
MajiD
  • 2,420
  • 1
  • 22
  • 32