css – 如果容器div较小,如何将子div扩展为100%的屏幕宽度?

前端之家收集整理的这篇文章主要介绍了css – 如果容器div较小,如何将子div扩展为100%的屏幕宽度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
整个页面的父元素是一个居中的div,限制为960px的最大宽度。页面上的所有其他元素都是该父div的子元素。简化结构如下:
<div id="parent">
  <div id="something"></div>
  <div id="wide-div></div>
  <div id="something-else></div>
</div>

当父div不应该扩展到960px以上的宽度时,这里我称之为“wide-div”的div应该填满屏幕的整个宽度。它包含比960px宽的单个图像,并且应该为屏幕的整个宽度设置不同的背景颜色。

我不能轻易地把这个div从父div中抽出来,它会弄乱我的布局的其他部分,这样会让整个事情变得很尴尬。

我发现了一些关于如何实现这一点的技巧,但没有一个似乎符合我的要求。我的设计是响应性的,或至少我正在努力实现。我发现的技巧依赖于知道涉及的元素的大小,这在我的情况下是不固定的。

有没有办法在响应式布局中将内部div扩展到全屏幕宽度?

解决方法

您可以根据vw(视口宽度)设置宽度。您也可以使用calc函数来计算div的左边距。这样,您可以将其放置在流程中,但仍然在中心的固定宽度div的左侧和右侧。

支持相当不错vw是supported by all major browsers,including IE9+. calc().同样的。如果你需要支持IE8或者Opera Mini,那么这个方法是不幸的。

div {
  min-height: 40px;
  Box-sizing: border-Box;
}
#parent {
  width: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

#something {
  border: 2px solid red;
}

#wide-div {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border: 2px solid green;
}
<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Green</div>
  <div id="something-else"></div>
</div>

猜你在找的CSS相关文章