问题
I have
<div style="position:relative; width:500px;">
<div style="position:absolute; width:100%"></div>
</div>
The child div takes 100% width of it's parent div. Is there a way i can force it to take 100% width of body and not the parent div. Both relative and absolute positioning are required as i have it in the code above.
回答1:
The only way to do this while keeping the relative and absolute positioning as you have in your code is to use JavaScript. You need to get window width and set that as the div width. You also need to detect window size on resize so you always have your div adjust set to the current window width.
The other 2 ways you can do this may not be options for but worth mentioning
- Put the child div outside the parent div.
- Or set it to fixed position. Doing this may not give a desirable effect. The div will always be in the same position regardless of page scroll.
回答2:
Modern browsers have support for viewport units.
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>来源：https://stackoverflow.com/questions/7948305/css-make-div-100-width-relevant-to-body-and-not-its-parent-div