使用具有相等高度列的锚隐藏内容

Question

设置

我正在制作一个简单的2列布局的网站。列将具有不同的高度（一个高于另一个）和动态高度（每个页面的内容不同）。两列的背景颜色应该向下延伸到最长列内容的最低点。

对于您之间的视觉学习者，CSS-Tricks has some nice illustrations

尝试

我正在使用One True Layout Method，在同一个CSS-Tricks页面上提到了一半。

I've recreated it on jsFiddle here

以下是相关编码

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

什么有用？

布局完全按预期工作。列高度适应动态内容，并始终保持相同的高度。

问题

Anchors break it。也就是说，页面向下滚动到内容中的正确锚点，但锚点上方的所有内容都被隐藏。我了解到这是由于overflow-y:hidden; - 页面向下滚动到内容而不是使用滚动条，它隐藏了上面的内容，而不仅仅是滚动它。禁用overflow:hidden会按预期显示所有内容，但由于底部填充较大，这种情况并不理想。

Other's have experienced this same problem与no recognized solutions that I could find。

可能的解决方案

我可以在JavaScript中进行快速高度检查并相应地设置每一列，但我真的希望保持整个网站布局JS免费。

有些文章提到绝对定位已修复，但这不适用于动态内容。

更改为其他列高度方法。但是......但是......但到目前为止我已经拥有了这个！我们是谁只是陷入<打击>不可能的一个艰难的编码挑战.. :)

援助呼吁

任何想法，其他程序员？

Answer 1

你正在欺骗浏览器，但它有副作用（它打破了锚点）。 最好的解决方案是找到一种不同的方法来调整柱高，但看起来在那个区域你还是做了更多的研究。

给出你的问题的参数（似乎你不想使用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/

Answer 2

由于您表示您不一定关心IE7支持，您可以使用其他技术之一（也可在您在问题中引用的CSS技巧链接中找到）使用display：table和table-cell。 / p>

无论动态内容如何，​​这都会为您提供相同的相等高度列，但也允许您在单击页面内锚点后向上滚动，而不会将内容完全隐藏在视图之外。

我真的很鄙视使用隐形表进行布局，但在这种情况下，它不会通过更改DIV显示属性值强制任何其他DOM元素，并且实际上不比负边距正填充更强大方法

#hold{
    width:100%;
    background:#ccc;
    height:100%;
    display: table;
}
#col1, #col2{
    display: table-cell;
}
#col1{
    width:200px;
    background:#00c;
}
#col2{
    background:#c00;
}