Question

更新：我发现这是<div>与overflow: hidden和锚点组合的非常具体的问题。似乎没有坚实的方法。我现在删除了overflow: hidden。这解决了我的锚点问题，但在我的列下面创建了额外的空间。这不是一个大问题，但如果有人知道如何在不使用overflow: hidden的情况下摆脱溢出，那么建议真的很受欢迎。 结束更新

我有一个相当简单的网站，在<div>两列中有一个标题。标题和列位于一个容器中。标题不固定;向下滚动时，标题会消失。

现在，我的问题在于我想在右栏中添加锚点。锚本身正常工作;当我点击页面顶部的链接时，它会跳转到<h2>就好了。它将标题放在屏幕顶部，就像我想要的那样。但问题是，当我滚动回到顶部时，列中内容的上半部分已经移到了标题后面。起初我以为它一直向上移动到页面顶部，但现在我发现情况并非如此。我不明白像素的数量对应。列本身似乎保持适当的长度;现在文本下面还有额外的空白区域。

我在本网站上已经阅读了其他几个问题，但是他们都处理了固定标题，而他们的问题是主标记本身消失在标题后面。我已经尝试过针对此问题提出的解决方案，但这会导致我的锚标记在页面上显得过低，并且无法解决我的列的上半部分在标题后面的问题。

有谁知道如何解决这个问题？？

我的页面设置HTML：

<div id="container">

    <div id="header">
    </div>

    <div id="columns">
        <div id="leftcolumn">
        </div>

        <div id="rightcolumn">
        </div>
    </div>
</div>

标题和列的CSS：

#header {
    width: 738px ;
    height: 298px ;
    padding: 0px ;
    position: relative; 
    }

#container {
    width: 738px ;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: 0px ;
    margin-bottom: 0px ;
    padding: 0px ;
    }

#columns {
    position: absolute;
    margin-top: 0px;
    margin-bottom: 0px ;    
    width: 738px ;
    background: #b43232 url(fauxcolumns.jpg) ;
    overflow: hidden ;  
    }   

#leftcolumn {
    float: left;
    width: 254px ;
    margin-top: 0px ;
    padding: 0px ;
    }

#rightcolumn {
    margin-left: 254px ;
    margin-top: 0px ;
    padding: 0px ;
    }

最后，我的HTML为锚点：

<a href="#text">Text</a>
<p>Text in between the top and the anchor.</p>
<a name="text"><h2>Text</h2></a>
<p>This is the text the anchor wants to take you to.</p>

所以，总结一下：锚点有效，但当我滚动回到顶部时，我内容的上半部分现在已经移到了标题后面。所以我想我希望我的列的内容与列的顶部对齐，而不是在标题后面的一些随机位置，但我无法想象如何做到这一点。将top或margin-top分别设置为#columns或两列都不起作用。我想不出别的......

有人有什么想法吗？

从锚点回滚后，标题后面的内容

0 个答案: