如何让一个div全宽

Question

这个新社区并不能找到，如果这个问题以前有人问

我使用的是在那里的含量设定为1200像素主题。问题是，我想创建一个DIV是全宽屏幕的边缘，然后抵消利润率左偏移的差异。 （我猜这是最简单的方法）

我的问题是我如何计算屏幕的一侧之间的列的宽度为1200像素网格的左侧？然后计算该差转换成DIV我想创建这样的DIV是全宽的宽度，不管它是viewd什么屏幕尺寸的？

我知道我可以用花哨的编辑器，如可视化编辑器做到这一点，但他们太笨重，使网站更慢..

以下似乎文字工作，但我不能让图像在屏幕上全宽伸展，除非我让大和重叠的屏幕尺寸。我需要它从屏幕一侧触摸到屏幕侧

`.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;
}`

再次，对不起，如果这样的问题已经被问过。

Answer 1

你的意思是这样的？

<div style="width:1200px;right:0px; top:100px; height:200px;background-color:lightgray;">Hello</div>

Answer 2

这是正确的，从W3的例子。 https://www.w3schools.com/cssref/func_calc.asp

#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>
<div id="div1">Some text...</div>

Answer 3

你可以做的是设置你的div是position: absolute所以你的DIV独立布局的休息。然后说width: 100%把它填满整个屏幕宽度。现在只需使用margin-left: 30px（或任何你需要的像素），你应该做的。

有关计算列的宽度：如果这不是一个问题，这一点使用JavaScript是很容易分辨的。

var col = document.findElementById("id-of-your-column-div");
var screenFill = document.findViewById("screen-filler");

screenFill.style.marginLeft = col.clientWidth;

Answer 4

你可以做：

  <style>
  .mydiv{
  width:1150px;
  margin: auto 0;
  }
 </style>

宽度：1150px它使用25像素每一侧上的裕度的左和右