Как я могу сделать div 100% ширины окна, в то время как ширина родителя составляет 95,5%?

Question

У меня небольшая проблема. В Navbar у меня есть response-dom-route, и проблема в том, что он возвращает мне div с максимальной шириной его родителя. Я хочу использовать маршрут от navbar для рендеринга View, который имеет свои собственные свойства css.

Небольшой пример кода:

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 из Контейнер navbar:

.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;
 }

В этот момент он получает 100% ширины родителя, что составляет 95,5% вместо ширины окна 100%. Как я могу это исправить?

Answer 1

Попробуйте использовать 100vw в качестве единицы вместо 100%

vw - это ширина области просмотра, поэтому она будет представлять ширину windows вместо элемента ваших родителей.

Если Вы ищете высоту, которую вы могли бы использовать vh для высоты окна просмотра.

Надеюсь, это поможет

Answer 2

Вы можете использовать vw единиц . Элемент, установленный на 100vw, всегда будет 100% окна, независимо от ширины его родителя.

Вы также можете использовать проценты. Элемент, равный 104.71204188% ширине элемента, равный 95.5% ширине окна, будет 100% ширины окна.