Question

所以我试图自己找到一个解决方案，但是我找不到适合自己的解决方案的主题，因为我有特殊的先决条件。

我的问题如下：我在左侧有一个粘性DIV元素，并在另一个DIV元素中添加了一个固定高度，因为如果没有固定高度，粘滞效果就不会起作用。右侧还有DIV容器中的许多元素。这个容器的高度取决于元素的数量。

最佳方法是，在完成DIV容器的所有内容元素后，sticky元素停止。但是因为我必须为粘滞元素的容器设置一个固定的高度，所以在再次出现其他任何内容之前，它会继续将其全部高度用作空白。

我希望它不会被解释不好。

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>

注意：请以全屏模式运行，否则#ProductContainer始终会在侧边栏下方。

我采取了许多方法，一种方法是使用jQuery测量#ProductContainer的高度，然后将结果设置为#StickyContainer的新高度。可悲的是它返回高度0。

由于结果，没有得到更多。我尝试了更多在StackOverflow上发现的内容，但似乎没有任何效果。不仅是JavaScript，而且还有HTML，因为问题似乎出在ProductContainer中，无法正确地容纳内容。

但是，即使这只是我的一个简单愚蠢的错误，我也感谢任何帮助。

Answer 1

content元素没有浮点数，并使ProductContainer在内部感觉不到任何东西。

您必须在父级上使用 clearfix 类。

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

跨平台，兼容的IE6 +，Chrome，Safari，Firefox，您可以将其命名！

.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%;
}

并把课程交给父母

<div id="ProductContainer" class="clearfix">

用jQuery获取DIV的高度无法正常工作

1 个答案: