Question

我有这个示例布局。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .wrapper { 
        padding: 0; 
        min-width: 960px;
        height: 500px; 
        border: 1px solid red
      }              
      .boxed-layout .wrapper {
        width: 1000px; 
        background: #FFF; 
        margin: 0 auto; 
      } 
      .inner { 
        width: 960px; 
        position: relative; 
        margin: 0 auto; /* main width */ 
      }     
      .responsive .inner { 
        max-width: 960px; 
        width: auto; 
      }
    </style>
  </head>
  <body>
    <div class="inner wrapper"></div>
  </body>
</html>

现在我需要在包装器中添加div全宽。所以我试过这种方式

.banner {
  position: relative; 
  left: -100px; 
  max-width: 2000px;
  width: auto; 
  border: 1px solid  green;
  height: 400px;
}

和

<div class="banner"></div>

但效果不佳。

使用负左侧相对定位将其移至零是否正确？
如果我使用width: 2000px代替auto，则会显示水平滚动条

那么，我怎样才能拥有全宽和响应？

Answer 1

在包装器中为div提供宽度：100％。听起来不错？

Answer 2

.banner { border:1px solid  green;height:400px;}

不要宽度，它会自动占据全宽

Answer 3

您必须从包装容器中移除position:relative（即inner类别限制器）。然后在标记后使用横幅：

HTML

<div class="banner">
    <div class="banner-inner"></div>
</div>

CSS

.banner {
  position: absolute; 
  left: 0; 
  right: 0;
}

.banner-inner {
  position:relative;
  margin:0 auto;
  max-width: 2000px; 
}

如果您不想删除position：relative因某种原因，那么您必须使用javascript / jQuery，如下所示（保持标记与上面相同）：

var marg = ($(window).width()-960)/2;
$('.banner').css({'left':-marg+'px','right':-marg+'px'});

Answer 4

根据公认的答案，OP的实际问题是有一个960像素宽的容器和容器。根据屏幕尺寸，有一个子div需要100％的身体（不是父亲）。这就像

一样简单

.banner {
  width: 100vw; 
}

无需更改任何其他原始属性。

视口百分比长度定义了相对于视口大小的长度，即文档的可见部分。

1vw =视口宽度的1/100

- MDN

将全宽div转换为内容包装器

4 个答案: