子 DIV 的全屏宽度答案

【问题标题】：Full screen width for a child DIV子 DIV 的全屏宽度
【发布时间】：2017-02-28 08:44:56
【问题描述】：

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

如何创建一个子菜单，从我的父级跨浏览器延伸 100% 宽度？

【问题讨论】：

贴出你尝试过的所有代码

标签： html css

【解决方案1】：

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

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

凭记忆。

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

好的，这是你的代码：

*,html,body{
     margin: 0;/*her is the trick*/
     padding: 0;/*her is the trick*/
           }
body,html{
	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>

希望对你有帮助。

【讨论】：