如何使 div 占据浏览器窗口的整个宽度而不重叠元素答案

【问题标题】：How to make a div take the whole width of the browser window without overlapping elements如何使 div 占据浏览器窗口的整个宽度而不重叠元素
【发布时间】：2015-06-01 20:39:33
【问题描述】：

我遇到了一个问题。我想用gallery-> PICTURES 制作一个div，占据页面的整个宽度。我试过了

position: absolute;
left: 0;
right: 0;

它可以工作，但是元素和页面现在重叠......我该如何解决这个问题？

链接到我的页面：http://web.ntf.uni-lj.si/~mojcaovnic/

谢谢。

【问题讨论】：

请在此处添加代码。链接没有应有的持久性。 SO 希望为每个人提供解决方案，不仅为您，您的某些问题可能对其他人有所帮助。
请为该部分添加 html 和 css。我不知道你在尝试哪个 div。
添加一些代码或创建一个 jsfiddle，其中包含您尝试执行的操作以及遇到的问题，以便我们可以看到您正在尝试执行的操作。根据您所说，我唯一了解的是您想要做的事情： div{width:100%;}
确保父元素的位置属性值为relative。这将有助于保持它。
肯定要花 2 分钟才能在网上找到答案？

标签： html css width overlapping

【解决方案1】：

使用position:absolute; 意味着它将不再使用文档中的任何空间，这就是您的元素重叠的原因。您应该使用position:relative; 来避免这种情况。

使用width:100vw; 将赋予div 视口的全宽，使用width:100%; 赋予它父元素的宽度。

【讨论】：