Div 超出视口(如顶部的 StackOverflow 栏)

发布于 2024-11-18 16:49:04 字数 162 浏览 5 评论 0原文

您可能已经在 StackOverflow(位于本页顶部)中看到了工具栏,以及它如何悬挂在视口之外。两个边缘都悬挂在页面上,顶部也是如此。我已经尝试过很多次但找不到答案。我如何使 div 的行为像这样 - 在 html、css 或 javascript 中 - 有人可以帮助我吗? (位置:固定;不是我要找的。)

You've probably seen the toolbar from StackOverflow (at the top of this page), how it hangs outside the viewport. Both of the edges hang off the page and so does the top. I have tried this so many times but can't find an answer. How would I make a div behave like this- in html, css, or javascript- can someone help me? (Position:fixed; is not what I'm looking for.)

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

街道布景 2024-11-25 16:49:04

它只是一个 div,但您必须关闭主体周围的填充:

<body>
   <div class="bar">test</div>
</body>

body{
  margin:0;
  padding:0;  
}

.bar {
  padding:3px;
  background-color:#ff7200;  
}

div 自动具有 width100%

a 现场示例

it is just a div, but you have to turn off the paddings in the body that is around:

<body>
   <div class="bar">test</div>
</body>

body{
  margin:0;
  padding:0;  
}

.bar {
  padding:3px;
  background-color:#ff7200;  
}

a div automatically has a width of 100%

a live sample here

雨巷深深 2024-11-25 16:49:04

如果您谈论的是页面顶部的灰色条,那么它只是一个带有灰色背景和负下边距的 div 样式:

#custom-header {
    background-color: #EEEEEE;
    height: 31px;
    margin-bottom: -31px;
}

If you're talking about the grey bar at the top of the page then it's simply a div styled with a grey background and a negative bottom margin:

#custom-header {
    background-color: #EEEEEE;
    height: 31px;
    margin-bottom: -31px;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文