Html 将全宽div放入内容包装器_Html_Css

Html 将全宽div放入内容包装器

html css

Html 将全宽div放入内容包装器,html,css,Html,Css,我有这个示例布局 <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:

我有这个示例布局

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

及

但效果并不好

使用负左相对定位将其移动到零是否正确

如果我使用

宽度：2000px

而不是

自动

，则会出现水平滚动条

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

只需给出宽度：包装内的div为100%。听起来不错

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

不要给出宽度，它会自动采用全宽

您必须从包装容器（即

内部

类容器）中删除

位置：相对

。对于横幅，请使用以下标记：

HTML

如果出于某种原因不想删除position:relative，则必须使用如下javascript/jQuery（保持标记与上面相同）：

根据公认的答案，OP的实际问题是有一个960px宽的容器&有一个子div，根据屏幕大小，它必须是body的100%（而不是父div）。这很容易

.banner {
  width: 100vw; 
}

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

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

1vw=视口宽度的1/100

.banner{位置：相对；左侧：-100px；最大宽度：2000px；宽度：100%；高度：400px；}不工作我不确定这是否有帮助。如果需要添加一个与包装器大小完全相同的内部div，只需将内部div绑定到包装器即可。就像这个Lorem ipsum dolor sita Met一样，你不想为内部div指定任何位置。它会自动占据包装div宽度的100%。“但效果不好。”？到底是什么不起作用。。？期望的输出是什么。。？元素

.boxed layout

和

.responsive

在哪里？？如果没有它，一半的共享css将无法应用，如果没有必要，就没有必要共享它，这只会让社区感到困惑。请尽量把你的问题说清楚。对不起，你说得对。这不是社区中最好的帖子之一，但罗哈南给了我一条路。我想知道这个答案的作用是什么，以及它如何解决上面解释的问题…@TJ我对这个问题的回答做了它必须做的工作。请试着理解这个问题，因为并不是每个用户都能用粗话来定义问题。但用户2741100提供的任何信息都足以理解用户2741100的问题。问题是有一个960px宽度的容器&是一个子div，根据屏幕大小，它必须是body的100%（而不是父级）。我刚才解释了怎么做。实际上这个答案是做什么的。。？

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

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

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

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

.banner {
  width: 100vw; 
}