如何使一个div全宽

Question

新手上路，请多包涵

我正在使用其内容设置为 1200 像素的主题。问题是我想创建一个全宽到屏幕边缘的 DIV，然后偏移 margin-left 以抵消差异。（我猜这是最简单的方法）

如何计算屏幕一侧与 1200px 网格左侧之间的列宽？然后将该差异计算到我要创建的 DIV 的宽度中，以便 DIV 是全宽的，而不管它在什么屏幕尺寸上被查看？

我知道我可以使用像 Visual Composer 这样的精美编辑器来做到这一点，但是它们太笨重并且会使网站变慢..

以下内容似乎适用于文本，但我无法将图像拉伸到整个屏幕宽度，除非我将其放大并与屏幕尺寸重叠。我需要它从屏幕一侧触摸到屏幕一侧

.blue_section {
  width: 200% !important;
  margin: 0px -50% 0px -50% !important;
  padding: 0px 0px 0px 0px !important;
  background-color: #0088CC;
}
.blue_content {
  width: 1200px !important;
  height: 100% !important;
 margin: 0px auto 0px auto !important;
 padding: 10px !important;
}

原文由 user3547342 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css

阅读 244

1 个回答

得票最新

社区维基

1

发布于
2022-12-19

如果你想使一个 div 达到屏幕的整个宽度，那么只需使用以下代码：

 div {
  /* I added this just for fun */
  background-color: skyblue;
  color: white;
  font-family: Century Gothic;
  padding: 5px;
  text-align: center;

  /* The code that you need to copy */
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
}

 <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>Hello World!</div>
  </body>
</html>

原文由 user15191147 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Stack Overflow 翻译

子站问答

访问

本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。

相似问题

找不到问题？创建新问题

如何使一个div全宽

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译