Make an inner div expand to the full-width of the page#
When a div is inside another div, adding width: 100%
will only stretch it to the width of its container. To make the stretch to the full width of the page (or viewport), use this
1
2
3
4
5
6
| .stretch-full-width {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
/* setting left margin as 50% of parent div's margin moves this div to the middle of the page. Then pull it back by a width that is half of the page's entire width. */
}
|
Related Posts: