儿童DIV的全屏宽度

Question

我正在尝试创建一个全宽度的超级菜单，它沿着我的浏览器延伸100％宽度。但是我的父div被卡在另一个div中，所以我的100％宽度子菜单无法超出它。

如何在我的浏览器中创建一个从父母伸展100％宽度的子菜单？

Answer 1

如果您无法控制HTML，快速但不理想的方法如下：

div.menu {
  position: relative;
  left: -50vw;
  width: 100vw;
  margin-left: 50%;
}

按记忆行事。

基本上，您使用margin-left将容器宽度的一半向右移动，将左边缘放在页面的中心。然后将relative菜单left移动一半视口宽度（vw），使其与窗口左侧齐平。最后设置width以匹配视口。

只要父元素都没有overflow: hidden;，那么这应该可以正常工作。

这是假设您的页面居中，否则@ Johannes＆＃39;解决方案就足够了。

Answer 2

您可以使用vw单位（视口宽度）：width: 100vw;

Answer 3

好的，这是你的代码：

＆＃13;

＆＃13;

<div class="parent">
<h2 style="color:black;text-align:center">I am the parent</h2>
<div class="child">
<h2 style="color:white;text-align:center">I am the child</h2>
</div>
</div>

＆＃13;

@f DATETIME(16)

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。