Menu
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.
391
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
- First set the width of the extended-content-container div to 500%. This will make the div you are trying to extend 5 time wider than the center column it lives inside. This can be adjusted up or down depending on the size of the center column you are working with.
auto automatically computes the width such that the total width of the div fits the parent, but setting 100% will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent. so setting the 'width' to 'auto' would be better? Yes, but that's the default anyway.
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
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
108
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
