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中包含实际内容，并且无法随意打开/关闭容器（可能是为了改装滑块）。
在这些情况下， 已知新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不应该是一个问题，因为一切仍在容器内。
-
问题内容： 如何从一个活动屏幕导航到另一个活动屏幕？在第一个屏幕中，我有一个按钮，如果我单击该按钮，则必须移至另一个“活动”屏幕。 问题答案：
-
问题内容： 情况：我有两个固定高度的div，两个溢出都设置为隐藏，并且第一个div中包含动态文本内容。如果该内容超出了第一个div的溢出边界，我希望它自动溢出到第二个div中。 我的问题就是该怎么做？我进行了研究，发现最接近的是一个JQuery插件，该插件会自动为类似报纸的布局创建列。尽管这并不是我真正需要的，但它确实使我希望可以在一个更简单的级别上实现。 可视示例： 谢谢大家！根据所有输入，我将
-
问题内容： 我有一个可以放在一起的网站，它的固定长宽比大约等于风景，例如视频。 我想使它居中并扩展以填充可用的宽度和可用的高度，但不要在任何一侧变大。 例如： 高而薄的页面将使内容伸展整个宽度，同时保持成比例的高度。 短而宽的页面将使内容伸展到整个高度，并具有成比例的宽度。 我一直在研究两种方法： 使用具有正确长宽比的图像来扩展容器，但我无法在主要浏览器中以相同的方式表现该图像。 设置成比例的底部
-
在鼠标悬停时，我想变换两个相邻的flex元素的位置，如下图所示 标记如下 我希望两个元素都是父元素的100%宽度，第二个元素溢出，这样我就可以在鼠标悬停时变换X。我遇到的问题是两个元素都被挤压到容器中。 我知道我可以在另一个div中包装这两个元素，并给它200%的容器宽度。但想知道这能不能用Flexbox完成
-
问题内容： 请看下面的代码。我只发布代码的重要部分。 activity_game.xml Game.java OnSwipTouchListener.java 注意-我不拥有此类代码。它由另一位SO成员编写。 现在，我正在尝试使“整个活动”处于启用状态。请查看以了解我的操作方式。但是问题是，它对任何触摸事件都没有反应！代码没有错，因为我通过将侦听器设置为来使用了touch事件。 我试图使整个活动处
-
我有这个代码: 它给了我这个： 它应该是一个8x8的网格，但它已经溢出了。如何以非编程方式（通过xml）拟合64个方块？