如果容器 div 较小，如何将子 div 展开为100% 屏幕宽度？

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:

.wide-div {
position: absolute;
left: 0;
right: 0;
}

You can use vw. Demo http://jsfiddle.net/fsLhm6pk/

.parent {
width: 200px;
height: 200px;
background: red;
}


.child {
width: 100vw;
height: 50px;
background: yellow;
}

<div class='parent'>
<div class='child'></div>
</div>

You are right, this won't work with centered div. Try this instead:

EDIT http://jsfiddle.net/fsLhm6pk/1/

.parent {
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
}


.child {
width: 100%;
left: 0;
right: 0;
position: absolute;
height: 50px;
background: yellow;
}

<div class='parent'>
<div class='child'></div>
</div>

You can set the width based on the vw (viewport width). You can use that value too using the calc function, to calculate a left-margin for the div. This way you can position it inside the flow, but still sticking out on the left and right side of the centered fixed-width div.

Support is pretty good. vw is supported by all major browsers, including IE9+. The same goes for calc(). If you need to support IE8 or Opera Mini, you're out of luck with this method.

-edit-

As mentioned in the comments, when the content of the page is higher than the screen, this will result in a horizontal scrollbar. You can suppress that scrollbar using body {overflow-x: hidden;}. It would be nice though to solve it in a different way, but a solution using left and rightlike presented in Width:100% without scrollbars doesn't work in this situation.

-edit 2021-

Another work-around for the scrollbars, which may be acceptable or not depending on your situation:
By making the green div a little bit smaller, say 20px, you can keep a bit of space for the scrollbar. Half that reserved width can be added to the margin, to keep the wide div centered:

#wide-div {
width: calc(100vw - 20px);
margin-left: calc(-50vw + 50% + 10px);

div {
min-height: 40px;
box-sizing: border-box;
}
#container {
position: relative;
}
#parent {
width: 400px;
border: 1px solid black;
margin: 0 auto;
}


#something {
border: 2px solid red;
}


#wide-div {
width: calc(100vw - 20px);
margin-left: calc(-50vw + 50% + 10px);
border: 2px solid green;
}

<div id="container">
<div id="parent">
<div id="something">Red</div>
<div id="wide-div">Green




<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
</div>
<div id="something-else">Other content, which is not behind Green as you can see.</div>
</div>
</div>

After much research, I found this solution: Creating full width (100% ) container inside fixed width container. I think that it is the best solution because it does not depend on any external factor, only the div that you want to expand.

<div class="container" style="width: 750px; margin: 0 auto;">
<div class="row-full">
--- Full width container ---
</div>
</div>


.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}

You can now do this

.full-width {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}

or this

.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}

More details: https://css-tricks.com/full-width-containers-limited-width-parents/

I'm a little surprised no one offered the following in the last 4 years. The css position:fixed property pulls the item out and scales it in relation to the window. There are some cases where maybe this doesn't work, but if you're Javascripting a modal box or something, this works fine.

.wide-div{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%; // in case you need to cover the height as well
background-color:rgba(0,0,0,.8); //just so you can see the div is on top of your content
z-index:1; // you may need to adjust the index of your other elements as well
}

My 50cent here..

Although I find other people's answers correct too, i think it needs to be mentioned an old css trick to archive this

.wide-div {
padding: 0 9999%;
margin: 0 -9999%;
}

Again in this case too, if a horizontal scrollbar appears you can fix this using

body {overflow-x: hidden;}

Depending the case, the difference in this code is that the inner content here stays aligned with the parent width

body {overflow-x: hidden;}


div {
min-height: 40px;
box-sizing: border-box;
}
#parent {
width: 400px;
border: 1px solid black;
margin: 0 auto;
}


#something {
border: 2px solid red;
}
#something-else {
border: 2px solid red;
}


#wide-div {
padding: 0 9999%;
margin: 0 -9999%;
border: 2px solid green;
}

<div id="parent">
<div id="something">Red</div>
<div id="wide-div">Wide</div>
<div id="something-else">Other content</div>
</div>