当前位置： 文江博客话题详情

如何让 css 框扩展浏览器窗口的整个宽度？

发布于 2024-09-18 09:01:02 字数 88 浏览 1 评论 0原文

例如，如果您查看 Facebook，它们顶部有一个短蓝色条，延伸了浏览器的整个宽度。我考虑过使用 width:100%;但我知道它需要有一个父元素才能做到这一点。

原文

For example, if you look at Facebook, they have a short blue bar on top that extends the entire width of the browser. I thought about using width:100%; but I know that it needs to have a parent element to be able to do that.

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

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

发布评论

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

评论（2）

无声情话 2024-09-25 09:01:02

单程：

<div style="position:absolute;left:0px;right:0px;height:20px"> </div>

One way:

<div style="position:absolute;left:0px;right:0px;height:20px"> </div>
回复 原文
尹雨沫 2024-09-25 09:01:02

文档本身充当父元素。默认情况下，div 的宽度是其父级宽度的 100%。

您可能需要做的是在 body 元素上不设置边距或填充。

<html> 
  <style>
    body { margin: 0; padding: 0; }
    #strip { background: #89f; padding: 5px; }
  </style>
  <body>
    <div id="strip">This is a nav strip</div>
  </body>
</html>

演示位于 http://www.coffeepowered.net/projects/navstrip.html

如果你使用 CSS 重置，那么这应该可以工作。

The document itself acts as a parent element. Divs, by default, are 100% of their parent's width.

What you probably need to do is set no margin or padding on the body element.

<html> 
  <style>
    body { margin: 0; padding: 0; }
    #strip { background: #89f; padding: 5px; }
  </style>
  <body>
    <div id="strip">This is a nav strip</div>
  </body>
</html>

Demo at http://www.coffeepowered.net/projects/navstrip.html

If you use a CSS reset, then this should Just Work.

回复 原文
~没有更多了~

关于作者

可爱暴击

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_FjTq5B

文章 0 评论 0

18273202778

文章 0 评论 0

WordPress小学生

文章 0 评论 0

〃温暖了心ぐ

文章 0 评论 0

迷乱花海

文章 0 评论 0

niuniu

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文