logo标签列表

如何让一个div元素充满整个宽度

htmlcss
5
我正在使用一个主题，其内容设置为1200像素。问题是我想创建一个DIV，使其宽度与屏幕边缘相同，并将margin-left偏移以抵消差异。（我猜这是最简单的方法）
如何计算屏幕侧面到1200像素网格左侧之间的列的宽度？然后将该差异计算到我正在创建的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;
}
https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/ - CBroe
为什么不直接使用Bootstrap呢？Bootstrap可以让所有这些变得更加容易，使您的页面更具响应性，并且它非常容易实现。它是由Twitter开发的。 - Omkar
https://dev59.com/b3M_5IYBdhLWcg3wt1k0 - TylerH
Divs 默认占满整个宽度。您不需要任何样式来实现这一点。 - TylerH
6个回答
6
如果你想让一个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>

2

这里是一个直接来自w3schools的例子： 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>

1

你可以将你的 div 设置为 position: absolute，这样它就不会受到布局的影响。然后使用 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;
1
你的意思是像这样吗？
<div style="width:1200px;right:0px; top:100px; height:200px;background-color:lightgray;">Hello</div>
-1

你可以做：

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

宽度为1150像素，使用25像素的左右边距

但是1200像素网格之间的边距取决于屏幕尺寸而是动态的。我不知道屏幕边缘和1200像素div边缘之间的确切像素宽度。 - Liquid_Shane_O
你想要实现什么目标？ - Chukwu Remijius
.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: 100px 0% 100px 0% !important; /* 100% DIV OR GREATER W/O OVERFLOW INTO NEXT CONTAINER */ display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; } - Liquid_Shane_O
-1
只需将 CSS 添加到您的 div 中并添加以下代码 -
div { 
   height: 100px;
   background-color: blue;
   margin -8px;
}

这应该可以正常工作。

你需要添加负边距，因为浏览器通常会在其网页内容中添加一些边距。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接