CSS - 如何从 div 溢出到整个屏幕宽度 [英] CSS - how to overflow from div to full width of screen

查看：19
本文介绍了CSS - 如何从 div 溢出到整个屏幕宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

.container{左边距:自动；边距右:自动；最大宽度:1280px；填充:0 30px;宽度:100%；&:extend(.clearfix all);}

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

解决方案

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

在这种情况下，您将背景颜色应用于全宽 div，而您不需要将颜色应用于内部受限的 div.

* {-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；边距:0；填充:0；}.容器 {最大宽度:80%；边框:1px纯红色；边距:0 自动；}.全屏宽度 {背景:橙色；}标题{高度:50px；背景:#663399；}.mydiv {/* 背景:橙色；*/最小高度:50px；}页脚{高度:50px；背景:#bada55；}

<标题></标题>
<div class="fullwidth"><div class="容器"><div class="mydiv"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Ipsum illum veniam in delectuscorruptioni autem magnam.Tenetur ducimus Provident nisi aut esse aliquid accusamus quas.</p>

<div class="mydiv"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Ipsum illum veniam in delectuscorruptioni autem magnam.Tenetur ducimus Provident nisi aut esse aliquid accusamus quas.</p>

<div class="容器"><页脚></页脚>

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

* {-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；边距:0；填充:0；}身体 {溢出-x:隐藏；}.容器 {最大宽度:80%；边框:1px纯红色；边距:0 自动；}标题{高度:50px；背景:#663399；}.mydiv {高度:100px；位置:相对；}.mydiv:后{内容: "";位置:绝对；高度:100%；顶部:0；左:50%；变换:translateX(-50%);宽度:100vw；背景:橙色；z-索引:-1；}页脚{高度:50px；背景:#bada55；}

<标题></标题><div class="mydiv"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Ipsum illum veniam in delectuscorruptioni autem magnam.Tenetur ducimus Provident nisi aut esse aliquid accusamus quas.</p>
<页脚></页脚>

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

在100%宽的div里有需要实际内容的情况，不能随意打开/关闭容器(可能是改装了一个滑块).

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

* {边距:0；填充:0；}身体 {溢出-x:隐藏；}.容器 {最大宽度:80%；边框:1px纯红色；边距:0 自动；}标题{高度:50px；背景:#663399；}.mydiv {高度:100px；位置:相对；}.myslider {位置:绝对；高度:100%；顶部:0；左:50%；变换:translateX(-50%);宽度:100vw；背景:橙色；}页脚{高度:50px；背景:#bada55；}

<标题></标题><div class="mydiv"><div class="myslider"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Ipsum illum veniam in delectuscorruptioni autem magnam.Tenetur ducimus Provident nisi aut esse aliquid accusamus quas.</p>

<页脚></页脚>

JSfiddle 演示

注意:在某些情况下，100vw 会导致溢出并可能出现水平滚动条. 上的 overflow-x:hidden 可以解决这个问题..这应该不是问题，因为其他所有东西都在容器内.

I have a containing DIV, that I use as part of my responsive grid. It expands to the maximum width I allow which is 1280px, then margins appear for large devices. Here's my CSS + a bit of Less.

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

    &:extend(.clearfix all);
}

However on some occasions I'd like to overflow sideways - lets say I have an background image or colour that needs to be full width. I'm not great at CSS - but is it possible to achieve what I want?

解决方案

The most obvious solution is just to close the container...have your full width div then open a new container. The title 'container' is just a class...not an absolute requirement that it hold everything all at the same time.

In this instance you apply the background color to the full width div and you don't need to apply a color to the internal, restricted 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>

However, for some they like a single all encompassing container so if all you are after is a background you could use a pseudo-element like so:

* {
  -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>

Support for vw is IE9+ - See http://caniuse.com/#feat=viewport-units

There are cases where actual content is required in the 100% wide div and the container cannot be opened/closed at will (perhaps to retrofit a slider).

In those cases, where the height of the new div is known the same technique can be used to position it as to be 100% viewport wide:

* {
  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

Note: there are instances where 100vw can cause overflow and a horizontal scrollbar might appear. overflow-x:hidden on the <body> can attend to that..it should not be an issue because everything else is still inside the container.

这篇关于CSS - 如何从 div 溢出到整个屏幕宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆