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

Question

安装程序

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

对于你们中的视觉学习者,CSS-Tricks有一些很好的插图

尝试

我正在使用One True Layout Method,在同一个CSS-Tricks页面上提到了大约一半.

我在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免费.

有些文章提到绝对定位是固定的,但这不适用于动态内容.

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

呼吁援助

任何想法,其他程序员？

Answer 1

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

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

我真的很鄙视使用不可见的表格来进行布局，但在这种情况下，它不会通过仅更改 DIV 显示属性值来强制任何额外的 DOM 元素，并且实际上并不比负边距正填充方法更hacky。

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