1

更新：我发现这是<div>'s 与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列或两列不起作用。我想不出别的了...

有人有想法么？

4

0 回答 0