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

【问题标题】：CSS - how to overflow from div to full width of screenCSS - 如何从 div 溢出到屏幕的全宽
【发布时间】：2015-04-18 09:54:45
【问题描述】：

我有一个包含 DIV，我将其用作响应式网格的一部分。它扩展到我允许的最大宽度 1280 像素，然后出现大型设备的边距。这是我的 CSS + 少一点。

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

    &:extend(.clearfix all);
}

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

【问题讨论】：

标签： css

【解决方案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>

然而，对于某些人来说，他们喜欢一个 single 包罗万象的容器，所以如果你所追求的只是背景，你可以像这样使用伪元素：

* {
  -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> 上的 <body> 可以解决这个问题。这应该不是问题，因为其他所有东西都在容器内。

【讨论】：

@Paulie_D 我注意到在您使用伪元素的第二个解决方案中，jQuery 动画存在问题。添加这些 jQuery 代码$('.mydiv').hide(); $('.mydiv').slideDown(); 会给你一个时髦的动画。你有什么想法解决这个问题吗？
听起来你有自己的问题的基础。

【解决方案2】：

我在margins (Source) 上使用vw 发现了这个超级有用的技巧

示例：

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

我可以使用吗：

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

http://caniuse.com/#feat=viewport-units

【讨论】：

【解决方案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>

【讨论】：