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

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

.container

{

margin-left:auto;

margin-right:auto;

max-width:1280px;

padding:0 30px;

width:100%;

&:extend(.clearfix all);

}

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

回答:

最明显的解决方案是关闭容器…将整个宽度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中包含实际内容,并且无法随意打开/关闭容器(可能是为了改装滑块)。

在这些情况下, 可以使用相同的技术将其定位为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不应该是一个问题,因为一切仍在容器内。

以上是 CSS-如何从div溢出到整个屏幕宽度 的全部内容, 来源链接: utcz.com/qa/406419.html

回到顶部