CSS-如何从div溢出到整个屏幕宽度

小编典典

CSS-如何从div溢出到整个屏幕宽度

css

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

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

    &:extend(.clearfix all);
}

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

阅读 485

2020-05-16

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

在某些情况下，需要在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>

注意：在某些情况下100vw可能会导致溢出，并且可能会出现水平滚动条。overflow-x:hidden就<body>可以参加到that..it不应该是一个问题，因为一切仍在容器内。

2020-05-16