Question

TL;博士 我有HTML+CSS page layout使用定位和滚动框来模拟框架布局。当我点击指向子页面锚点的链接时，整个页面会滚动，隐藏标题。

详细信息： 您可以在此处查看问题：http://phrogz.net/tmp/framed.html

当浏览器窗口足够高以至于侧面导航没有溢出时，点击链接会正确滚动内容＆＃39;标题部分。
但是，当浏览器窗口太短以至于侧面导航显示侧边栏时，点击侧边栏中的链接会导致整个body滚动，以便标题位于屏幕顶部。 Chrome，FF和IE9的行为都相似。

标题，侧边栏和内容都绝对定位以适合视口，并且具有overflow:hidden或overflow:auto。我也有html, body { overflow:hidden }。

如何才能最好地解决这个问题，以便导航到页面上的#id永远不会滚动身体？

我正在寻找一个CSS / HTML解决方案;我知道我可以使用JavaScript黑客来修复＆＃39;这可以通过拦截点击并根据需要滚动#contents到脚本，或者在点击发生后使用document.body.scrollTop = 0。

以下是标记摘要：

framed.html

<body>
  <article id="contents">
    <section id="section1">
      <header><h2>Section 1</h2></header>
      <!-- section 1 contents -->
    </section>
    <section id="section2">
      <header><h2>Section 2</h2></header>
      <!-- section 2 contents -->
    </section>
    <!-- more sections -->
  </article>
  <nav id="site-nav"><ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <!-- more links -->
  </ul></nav>
  <header id="header"></header>
</body>

framed.css

html, body { margin:0; padding:0; overflow:hidden }
#header {
  overflow:hidden;
  position:absolute;
  top:0; left:0; width:100%; height:50px;
}
#contents {
  overflow:auto;
  position:absolute;
  top:50px; left:210px; right:0; bottom:0;
  padding:1em 1.5em 600px 1.5em;
}
#site-nav {
  overflow:auto;
  position:absolute;
  top:50px; bottom:0; left:0; width:210px;
}

修改：此处可以看到该文档的固定版本：http://phrogz.net/tmp/framed-fixed.html

Answer 1

为什么不尝试位置：固定为#header和＃site-nav？

Answer 2

另一种解决方法（并进一步深入了解问题）：

从600px删除#contents底部填充可解决问题。同样的效果（在文档末尾有大量空白区域，以便最后一项可以直接链接）可以通过以下方式实现：

#contents > *:last-child { margin-bottom:600px }

或者，使用更简单的CSS并稍微改变标记：

<article id="contents">
  <!-- full contents here -->
  <hr id="contents-end">
</article>

#contents-end { visibility:hidden; margin-top:600px }

滚动到伪框架网站上的锚点会隐藏标题

2 个答案: