使用具有等高度列的锚点隐藏内容
安装程序
我正在制作一个简单的2列布局网站。 这些列将具有不同的高度（一个高于另一个）和动态高度（每个页面的内容不同）。 这两列的背景颜色应该延伸到最长列内容的最低点。
对于你们中的视觉学习者，CSS-Tricks有一些很好的插图
尝试
我使用的是一个真正的布局方法，在相同的CSS技巧页面中提到大约一半的时间。
我已经在jsFiddle上重新创建了它。
这是相关的编码
HTML
<a href="#area1">Go To Section 1</a>
<a href="#area2">Go To Section 2</a>
<a href="#area3">Go To Section 3</a>
<div id="hold">
<div id="col1">
Content Column 1
</div>
<div id="col2">
Content Column 2
<h2 id="area1">Section 1</h2>
<img src="http://placehold.it/100x750" alt=" placehold img" />
<h2 id="area2">Section 2</h2>
<img src="http://placehold.it/100x750" alt=" placehold img" />
<h2 id="area3">Section 3</h2>
<img src="http://placehold.it/100x750" alt=" placehold img" />
</div>
</div>
CSS
#hold{
height:100%;
overflow-y:hidden;
}
#col1, #col2{
padding-bottom:100000px;
margin-bottom:-100000px;
}
#col1{
float:left;
width:200px;
}
#col2{
margin-left:200px;
}
什么有效？
布局完全按预期工作。 列高度适应动态内容，始终保持相同的高度。
问题
锚点打破它。 也就是说，页面向下滚动到内容中的适当锚点，但锚点上的所有内容都隐藏起来。 我了解到这是由于overflow-y:hidden; - 页面向下滚动到内容，而不是使用滚动条，它隐藏了上述内容，而不仅仅是滚动过去。 禁用overflow:hidden按预期显示所有内容，但由于底部填充较大，因此这并不理想。
其他人也经历过同样的问题，没有我能找到的公认解决方案。
可能的解决方案
我可以在JavaScript中进行快速高度检查并相应地设置每个列，但我真的想要保持整体网站布局JS免费。
有些文章提到绝对定位是固定的，但这不适用于动态内容。
更改为不同的列高度方法。 但是......但是......但我已经有了这个到目前为止！ 我们是谁，只是陷入了一个不可能的困难的编码挑战.. :)
呼救
任何想法，同行程序员？
既然你表示你不一定关心IE7的支持，你可以使用其他技术（也可以在你的问题中引用的CSS技巧链接中找到）使用display：table和table-cell。
无论动态内容如何，这可为您提供相同的高度相同的列，还可让您在单击页内定位点后向上滚动，而不会将内容完全隐藏。
我真的很鄙视使用不可见的表格来进行布局，但在这种情况下，它不会通过更改DIV显示属性值来强制添加任何其他DOM元素，而且实际上并不比负边距正值填充方法更具冒险性。
#hold{
width:100%;
background:#ccc;
height:100%;
display: table;
}
#col1, #col2{
display: table-cell;
}
#col1{
width:200px;
background:#00c;
}
#col2{
background:#c00;
}
你欺骗浏览器，但它有一个副作用（它打破了锚点）。 最好的解决办法是找到一种调整色谱柱高度的不同方法，但看起来在那个领域你已经做了更多的研究，然后我反正。
考虑到你的问题的参数（看起来你不想使用JavaScript进行设计，而且你也不想改变你用来修复列的方法），我会说最接近你的是是使用你的CSS设计和JavaScript来修复锚点。
这段代码应该适合你
var isScrollFix = false;
document.getElementById('hold').addEventListener('scroll',function(e){
if(!isScrollFix) {//dont copy our own scroll event onto document
isScrollFix = true;
var scrollTo = this.scrollTop;
this.scrollTop = 0;
window.scroll(0, scrollTo);
} else {
isScrollFix = false;
}
});
或者在jsfiddle上添加一些额外的代码来解释其他情况http://jsfiddle.net/joshK/P72LV/5/
链接地址: http://www.djcxy.com/p/69155.html