【问题标题】: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 &lt;body&gt; 上的 &lt;body&gt; 可以解决这个问题。这应该不是问题,因为其他所有东西都在容器内。

    【讨论】:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-10-13
        • 2021-12-21
        • 2013-12-08
        • 1970-01-01
        相关资源
        最近更新 更多