URL 片段如何影响 CSS 布局？

发布于 2024-07-30 20:02:28 字数 519 浏览 7 评论 0原文

比较这 3 个 URL（分别查看顶部导航栏）：

http://fast.kirkdesigns。 co.uk/blog
如上，但带有 url 片段 #navigation
如上，但带有 url 片段 #node-2655

请注意，唯一的区别是末尾的 URL 片段。

前两个页面显示得非常好（至少在 Firefox 中）。问题出在第三个。片段 #node-2655 将顶部导航栏推离屏幕顶部。然后，当您向上滚动到页面顶部时，导航栏已被切成两半。当使用任何导致导航栏在页面首次加载时超出初始视口的 URL 片段时，就会发生这种情况。

那么，使用 url 片段怎么会影响这样的 css 布局呢？！

解决方案：如下所示，删除保存导航栏的容器元素上的溢出：隐藏解决了问题。我很想了解为什么！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

挽清梦 2024-08-06 20:02:37

我能够用一些 JavaScript 来解决这个问题，将主体滚动到溢出隐藏元素滚动到的位置。

setTimeout(() => {
    let intendedScroll = document.getElementById("fragmentfix").scrollTop;
    document.getElementById("fragmentfix").scrollTop = 0;
    window.scrollTo(0, intendedScroll);
}, 0)

I was able to solve this with some javascript to scroll the body to the position the overflow hidden element was scrolled to.

setTimeout(() => {
    let intendedScroll = document.getElementById("fragmentfix").scrollTop;
    document.getElementById("fragmentfix").scrollTop = 0;
    window.scrollTo(0, intendedScroll);
}, 0)

回复收藏 0 原文

手心的海 2024-08-06 20:02:36

顺便说一句，上述技术通常用于提供灵活宽度的多列布局。如今，随着固定宽度布局越来越多的评论，这一点可能变得不那么重要了——浏览器能够放大网页以查看小文本，并且固定宽度使得控制页面的排版变得更加容易，例如，设置宽度（以 em 为单位）以每行显示理想的 9 个单词，无论用户选择什么字体大小和放大倍数。

抱歉，如果这听起来不像一个答案，但它基本上是建议放弃这个旧模型并考虑转向固定宽度列（这是一个全新的主题）。

回复收藏 0 原文

苯莒 2024-08-06 20:02:35

抱歉，这不是一个“答案”，尽管它是对此处其他评论的回应。这个问题简直令人瞠目结舌。它很容易隔离（即与样式表的数量无关），并且没有适当的“解决方案”，因为没有办法实现所需的渲染。

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  margin: 1em auto;
  width: 40em;
}
#wrapper {
  overflow: hidden;
  position: relative;
}
#c1 {background-color: #aaf;}
#c2 {background-color: #ccf;}
.column {
  float: left;
  margin-bottom: -5678px;
  padding-bottom: 5678px;
  width: 50%;
}
#footer {
  background-color: #eee;
  padding: 1px;
  text-align: center;
}
p {margin: 1em;}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="c1" class="column">
<p>This is some content in a short column. We would need some Javascript to change its height if we wanted a different background color for each column to stretch the full height of the respective columns...or we can use large padding together with an equal negative margin.</p>
<ul>
<li><a href="#p1">Jump to P1</a></li>
<li><a href="#p2">Jump to P2</a></li>
<li><a href="#p3">Jump to P3</a></li>
</ul>
</div>
<div id="c2" class="column">
<p id="p1">The desired effect is to have the height of the two columns appear the same. We use 'overflow:hidden' on the containing div (#wrapper) to wrap it around the floated columns.</p>
<p id="p2">These paragraphs have fragment identifiers. Problem comes in when clicking one of the links on the left. Instead of scrolling just the page, the browser scrolls the div with 'overflow:hidden' so the target is at the top. It does this even if the target is already visible.</p>
<p id="p3">Opera does not exhibit this behavior. This occurs in Chrome/Safari, Firefox, and IE. (Interestingly, IE also works as expected if we completely remove the DOCTYPE declaration.)</p>
</div>
</div>
<div id="footer">
<p>Footer stuff.</p>
<p>To see why 'overflow: hidden' (or any other piece of the CSS) is needed, just try disabling it.</p>
</div>
</div>
</body>
</html>

Sorry this isn't an "answer," tho it is a response to the other comments here. This problem is just flabbergasting. It is very easy to isolate (i.e., has nothing to do with number of stylesheets), and doesn't have a proper "solution," as there is no way to achieve the desired rendering.

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  margin: 1em auto;
  width: 40em;
}
#wrapper {
  overflow: hidden;
  position: relative;
}
#c1 {background-color: #aaf;}
#c2 {background-color: #ccf;}
.column {
  float: left;
  margin-bottom: -5678px;
  padding-bottom: 5678px;
  width: 50%;
}
#footer {
  background-color: #eee;
  padding: 1px;
  text-align: center;
}
p {margin: 1em;}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="c1" class="column">
<p>This is some content in a short column. We would need some Javascript to change its height if we wanted a different background color for each column to stretch the full height of the respective columns...or we can use large padding together with an equal negative margin.</p>
<ul>
<li><a href="#p1">Jump to P1</a></li>
<li><a href="#p2">Jump to P2</a></li>
<li><a href="#p3">Jump to P3</a></li>
</ul>
</div>
<div id="c2" class="column">
<p id="p1">The desired effect is to have the height of the two columns appear the same. We use 'overflow:hidden' on the containing div (#wrapper) to wrap it around the floated columns.</p>
<p id="p2">These paragraphs have fragment identifiers. Problem comes in when clicking one of the links on the left. Instead of scrolling just the page, the browser scrolls the div with 'overflow:hidden' so the target is at the top. It does this even if the target is already visible.</p>
<p id="p3">Opera does not exhibit this behavior. This occurs in Chrome/Safari, Firefox, and IE. (Interestingly, IE also works as expected if we completely remove the DOCTYPE declaration.)</p>
</div>
</div>
<div id="footer">
<p>Footer stuff.</p>
<p>To see why 'overflow: hidden' (or any other piece of the CSS) is needed, just try disabling it.</p>
</div>
</div>
</body>
</html>

回复收藏 0 原文