header {
width: 50%;
background-color: lightblue;
padding: 20px 0;
}
nav {
width: 100vw;
background-color: orange;
padding: 20px 0;
}
<html>
<body>
<header>
<p>This inherits the width of the parent like normal.</p>
<nav>
<a href="/">this fills the viewport</a>
</nav>
</header>
</body>
</html>
3条答案
按热度按时间ftf50wuq1#
现代浏览器支持viewport units。
c0vxltue2#
要做到这一点，同时保持代码中的相对和绝对定位，唯一的方法是使用JavaScript。您需要获取窗口宽度并将其设置为div宽度。您还需要在调整大小时检测窗口大小，以便始终将div调整设置为当前窗口宽度。
其他2种方法可能不是选项，但值得一提
1.将子div放在父div之外。
1.或者将其设置为固定位置。这样做可能不会给予理想的效果。无论页面滚动如何，div都会始终处于相同的位置。
ikfrs5lh3#
现在，您可以通过以下方式使某物相对于视口
视口宽度
vw视口高度
vh以较大者为准
vmax以较小者为准
vmin这对许多人来说可能是一种选择。