CODEWITHSUNDEEP
htmlcss
ottz0
ottz0

Reputation: 2605

Full screen width for a child DIV

I'm trying to create a full width mega menu which stretches 100% width along my browser. However my parent div is stuck inside another div so my 100% width submenu can't get outside of it.

How can I create a sub menu that stretches 100% width across my browser from my parent?

enter image description here

Upvotes: 1

Views: 2512

Answers (3)

Nadim
Nadim

Reputation: 320

Ok , so here is your code :

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

hope it helps.

Upvotes: 0

Gwellin
Gwellin

Reputation: 484

A quick but not ideal way to do this if you have no control over the HTML is as follows.

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

Going by memory.

Basically you use margin-left to move it half of the container width to the right, putting the left edge at the centre of the page. Then move the relative menu left by half of the viewport width (vw) so that it's flush with the left of the window. And finally set the width to match the viewport.

As long as none of the parent elements have overflow: hidden; then this should work well.

This is assuming your page is centred, otherwise @Johannes' solution is sufficient.

Upvotes: 3

Johannes
Johannes

Reputation: 67798

You can use the vw unit (viewport width): width: 100vw;

Upvotes: 0

Related Questions