Question

我有一个包含DIV，我用作响应网格的一部分。它扩展到我允许的最大宽度1280px，然后为大型设备显示边距。这是我的CSS +一点点。

.container
{
    margin-left:auto;
    margin-right:auto;
    max-width:1280px;
    padding:0 30px;
    width:100%;

    &:extend(.clearfix all);
}

然而，在某些情况下，我想横向溢出 - 假设我有一个需要全宽的背景图像或颜色。我不擅长CSS - 但是有可能实现我想要的吗？

Answer 1

最明显的解决方案是关闭容器...拥有全宽div然后打开一个新容器。标题“容器”只是一个类......不是绝对要求它同时保存所有内容。

在这种情况下，您将背景颜色应用于整个宽度div，而不是需要将颜色应用于内部受限制的div。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  /* background: orange; */
  min-height: 50px;
}
footer {
  height: 50px;
  background: #bada55;
}

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
    </div>
    <div class="mydiv">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
    </div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

然而，对于一些人来说，他们喜欢一个单个所有包含容器，所以如果你所有人都是背景，你可以使用像这样的伪元素：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  height: 100px;
  position: relative;
}
.mydiv:after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: orange;
  z-index: -1;
}
footer {
  height: 50px;
  background: #bada55;
}

<div class="container">
  <header></header>
  <div class="mydiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
  </div>
  <footer></footer>
</div>

对vw的支持是IE9 + - 请参阅http://caniuse.com/#feat=viewport-units

有些情况下，100％宽的div需要实际内容，并且容器无法随意打开/关闭（可能是为了改装滑块）。

在这些情况下， ，其中新div的高度已知 ，可以使用相同的技术将其定位为100％视口宽：

* {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  height: 100px;
  position: relative;
}
.myslider {
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: orange;
}
footer {
  height: 50px;
  background: #bada55;
}

<div class="container">
  <header></header>
  <div class="mydiv">
    <div class="myslider">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
    </div>
  </div>
  <footer></footer>
</div>

JSfiddle Demo

注意：有些情况100vw会导致溢出，并且可能会出现水平滚动条。 overflow-x:hidden <body>上的{{1}}可以关注..这不应该是一个问题，因为其他一切仍然在容器内。

Answer 2

我在vw margins上使用.inner-but-full { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }找到了这个超级有用的技巧

示例：

html,body {
  overflow-x: hidden; /* Prevent scrollbar */
}

.inner-but-full {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  height: 50px;
  background: rgba(28, 144, 243, 0.5);
}

.container {
  width: 300px;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(0, 0, 0, 0.5);
}

演示：

<div class="container">
  <div class="inner-but-full"></div>
</div>

SELECT DISTINCT pilot_name
 FROM PilotSkills AS PS1 
 WHERE NOT EXISTS
   (SELECT *
      FROM Hangar
     WHERE NOT EXISTS
           (SELECT *
              FROM PilotSkills AS PS2
             WHERE (PS1.pilot_name = PS2.pilot_name)
               AND (PS2.plane_name = Hangar.plane_name)));

我可以使用：

Source

http://caniuse.com/#feat=calc

Answer 3

<meta charset="UTF-8">
<style type="text/css">p{text-align:center;margin-left:25%;height:300px;width:50%;border:1px solid red;margin-bottom:0;margin-top:0;padding:0;
} body{margin:0;text-align:center;height:100%;width:100%;max-width:100%;max-height:100%;}</style>
<p style="color:yellow;background-color: red;">yep</p><p style="color:red;background-color: yellow;">yep</p><p style="color:white;background-color: blue;">yep</p>

CSS - 如何从div溢出到屏幕的全宽

3 个答案: