CODEWITHSUNDEEP
htmlcss
Anthony Russo
Anthony Russo

Reputation: 931

Absolute positioned element 100% width of screen

I'm trying to make a dropdown menu 100% width of screen with my current markup seen here: https://jsfiddle.net/0nd5hL5h/

I've tried using the following styles on the .dropdown-menu class but it's causing a horizontal scrollbar, giving the body overflow-x:hidden is not an option.

width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;

If you have any suggestions or can provide a solution without changing my current markup please share!

Upvotes: 1

Views: 2597

Answers (1)

Serg Chernata
Serg Chernata

Reputation: 12400

Remove relative positioning from dropdown.

.dropdown{
    /*position: relative;*/
}

Center the dropdown against the body:

.dropdown:hover > .dropdown-menu{
    margin-left: 50%;
    width: 100vw;
    transform: translateX(-50%);
}

Oh and, I recommend using border-box.

*{ box-sizing: border-box; }

Edit:

Apparently 100vw takes the entire viewport width into account. Which includes the width of a vertical scrollbar. This makes sense in hindsight but seems like a bad choice in terms of the spec.

Either way, a quick patch is to disable overflow-y on the document.

html{overflow-y: hidden;}

Upvotes: 1

Related Questions