小孩的全屏宽度DIV

Question

我正在尝试创建一个宽度超大的菜单，它沿着我的浏览器延伸了100％的宽度。然而，我的父div被困在另一个div内，所以我的100％宽度子菜单无法超出它。

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

Answer 1

可以使用VW单元（视宽）：width: 100vw;

Answer 2

快速但不理想的方式，如果你没有控制权，HTML是如下这样做。

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

去记忆。

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

只要没有父元素有overflow: hidden;那么这应该工作得很好。

这是假设你的页面居中，否则@Johannes的解决方案就足够了。

Answer 3

好了，这里是你的代码：

*,html,body{ 
 
    margin: 0;/*her is the trick*/ 
 
    padding: 0;/*her is the trick*/ 
 
      } 
 
body,html{ 
 
\t height: 100%; 
 
     background-color: #f06d06; 
 
     font-family: robotoregular; 
 
} 
 

 
.parent{ 
 
width:300px; 
 
height:100px; 
 
background-color:#eee; 
 
position:relative;/* for the demo*/ 
 
} 
 

 
.child{ 
 
position : absolute;/*for the demo*/ 
 
bottom:0px;/* for the demo*/ 
 
top: 50%;/* for the demo*/ 
 
transform: translate(0, -50%);/* for the demo*/ 
 
width:100vw;/* Her is the trick !*/ 
 
height:50px; 
 
background-color:red; 
 
}

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

希望它帮助。