7

设置

我正在制作一个具有简单 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 自由。

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

更改为不同的列高方法。但是...但是...但是到目前为止我已经有了这个！我们是谁来简单地屈服于一个不可能的困难编码挑战.. :)

呼吁援助

各位程序员，有什么想法吗？

4

2 回答 2

2

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

考虑到您的问题的参数（您似乎不想使用 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/

于 2013-02-12T15:52:20.773 回答
2

由于您表示您不一定关心 IE7 支持，因此您可以使用其他技术之一（也可以在您在问题中引用的 CSS Tricks 链接中找到）来使用显示：表格和表格单元格。

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

我真的很鄙视使用不可见的表格进行布局，但在这种情况下，它不会通过更改 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;
}
于 2013-02-12T16:49:59.450 回答