你所遇到的问题是由于
position: fixed;引起的，因为该对象被从工作流中取出，其他对象无法将其推开。我已经成功地得到了一个漂亮且完全响应的布局。(让我知道它的效果如何)
固定定位元素从正常流中删除。文档和其他元素的行为就像固定定位元素不存在一样。
固定定位元素可以重叠在其他元素上。
更新的答案以更好地满足他的需求 (JSFIDDLE，在url中删除show即可查看代码)
好的，我在这里使用css media queries来更改布局。
这是html：
<div class="wrap">
<nav></nav>
<div class="content"></div>
<section class="lSide"></section>
<section class="rSide"></section>
</div>
现在是媒体查询，
@media only screen and (max-width: 680px) {
.content {
width: 90%;
margin-bottom: 10px;
}
.lSide, .rSide {
position: relative;
width: 90%;
height: 100px;
margin: 10px auto;
bottom: 0;
}
}
不要忘记将此添加到您的HTML文件的中，
head和
html文件相关。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
旧回答
CSS（JSFIDDLE，删除show以查看代码）
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: tan;
}
.wrap.active {
min-width: 750px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: brown;
z-index: 101;
}
.lSide {
background: #3b3b3b;
position: fixed;
left: 0;
top: 20%;
width: 200px;
height: 80%;
}
.content {
width: 300px;
height: 600px;
background: #c1c1c1;
margin: 0 auto;
position: relative;
z-index: 100;
top: 20%;
}
.rSide {
background: #3b3b3b;
position: fixed;
right: 0;
top: 20%;
width: 200px;
height: 80%;
}
.rSide.active {
display: none;
}
JS，（已更新）
$(window).resize(function() {
if ($(window).width() < '750') {
$('.wrap, .rSide').addClass('active');
}
else {
$('.wrap, .rSide').removeClass('active');
}
});
我有一个解决方案，参考css旁边的fiddle，在屏幕尺寸太小时移除右侧。
