Jay Taylor's notes
back to listing indexHow can I expand a child div to 100% screen width if the container div is smaller?
[web search]
The parent element of the whole page is a centered div limited to a max-width of 960px. All other elements on the page are children of that parent div. The simplified structure is the following:
While the parent div shouldn't expand beyond a width of 960px, the div I called "wide-div" here should fill the entire width of the screen. It contains a single image that is wider than the 960px, and it should set a different background color for the entire width of the screen. I can't easily take that div out of the parent div, it would mess up other parts of my layout and it would make the whole thing rather awkward. I found a few tricks on how you can achieve this, but none seemed to fit my requirements. My design is responsive, or at least I'm trying to achieve that. The tricks I found relied on knowing the size of the involved elements, which is not fixed in my case. Is there a way to expand the inner div to the full screen width in a responsive layout?
|
|||||||||||||||||||||
|
|||||||||||||||||||||
You can set the width based on the vw (viewport width). You can use that value too using the Support is pretty good.
|
|||||||||||||||||||||
|
Typically the responsive element, bootstrap or Foundation, allow you to add a "row" element. You can put the "wide-div" outside an element with "row" and it should expand to take up the full width. Alternatively, you can use absolute positioning for that element which ignores most inherited settings:
|
|||
you can use vw. demo http://jsfiddle.net/fsLhm6pk/
you are right, this won't work with centered div, try this instead EDIT http://jsfiddle.net/fsLhm6pk/1/
|
|||||||||||||||||||||
|
The idea is to set the
|
||||
Your Answer
asked |
9 months ago |
viewed |
1383 times |
active |
Related
Technology | Life / Arts | Culture / Recreation | Science | Other | ||
---|---|---|---|---|---|---|