Question

此社区的新手，无法在

之前查询此问题

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

我的问题是如何计算屏幕一侧到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;
}`

再次，对不起，如果之前有人问过这样的问题。

Answer 1

您可以做的是将div设置为position: absolute，这样您的div就会独立于布局的其余部分。然后说width: 100%让它填满屏幕宽度。现在只需使用margin-left: 30px（或者你需要的任何px）就应该完成。

关于计算列的宽度：如果不是问题，可以使用Javascript轻松解析。

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

screenFill.style.marginLeft = col.clientWidth;

Answer 2

你的意思是这样吗？

file.scala:16: error: type mismatch;
 found   : Unit
 required: Int => ?
            println(getBestSolution(sumList))
                   ^
one error found

Answer 3

以下是w3的一个例子。
https://www.w3schools.com/cssref/func_calc.asp

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

你可以这样做：

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

宽度：1150px，左右各边使用25px的边距

Answer 5

如果你想在屏幕的整个宽度上制作一个 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>

如何使div全宽

5 个答案: