CODEWITHSUNDEEP
htmlcssreactjssass
Goteii
Goteii

Reputation: 170

How can I make div 100% of window width meanwhile parent's width is 95.5%?

Ive got a small problem. I have react-dom-route's in my Navbar and the problem is that it gives me back the div with max width of its parent. The thing I want to do is using route from navbar to render View which has its own scss-properties.

A small sample of code: 

return (
<Router>
.................
<div className="navbar_bottom-button">
<Link to="/foo" className="navbar-link">
    Foo
</Link>
</div>
.......
 <Switch>
<Route path="/foo">
<Foo />
</Route>
</Switch>
</Router>

Css of navbar's container:

.navbar_container {
position: absolute;
display: flex;
flex-direction: row;
margin-left: 2%;
z-index: 4;
width: 95.5%;
text-shadow: 4px 4px 3px rgba(0, 0, 0, 1);
}

Foo's css:

.foo-container {
  position: absolute;
  max-width: 100%;
 min-width: 100%;
 width: 100%;
 left: 0px;
 background-color: purple;
 top: 1000px;
 height: 1000px;
 padding: 0;
 margin: 0;
 text-shadow: none;
 }

At this point it gets 100% of parent's width which is 95.5% instead of 100% width of window. How could I fix that?

Upvotes: 0

Views: 96

Answers (2)

Sean
Sean

Reputation: 8031

You could use vw units. An element set to 100vw will always be 100% of the window, regardless of its parent's width.

You could also use percentages. An element that is 104.71204188% the width of an element that is 95.5% the width of the window, will be 100% of the width of the window.

Upvotes: 2

DrMoney
DrMoney

Reputation: 355

Try using 100vw as the unit instead of 100%

vw is Viewport Width so it will represent the windows width instead of your parents element.

If you're looking for height you could use vh for Viewport Height as well.

Hope this helps

Upvotes: 4

Related Questions