position: fixed;の問題は、そのオブジェクトがワークフローから取り出され、他のオブジェクトがそれを押し出すことができないためです。私は働くために素敵で完全に反応するレイアウトを得ることができました。 （それがどうか分かります）
固定配置要素は通常のフローから削除されます。 ドキュメントおよびその他の要素は、固定された配置された要素のように動作します が存在しません。
固定配置要素は、他の要素と重なり合う可能性があります。より良いスーツに
更新答え、自分のニーズ（JSFIDDLE, remove the show, in the url, to see code）私は、レイアウトを変更するには、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;
}
}
は
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
、あなたのhtmlファイルにあなたのheadにこれを追加することを忘れないでください。 旧回答
CSS、（JSFIDDLE, remove the show to see code）
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に次のフィドルを参照している、右側を削除するとき画面サイズが小さくなります。
フィドルを作成してください。 – andi
私は質問された質問の一番下にフィドルを追加しました。 –
あなたが作ったあなたのフィドルを見た後、あなたのCSSを自分のファイルにすることを強くお勧めします。インラインスタイルは、特にレスポンシブウェブサイトを使用する方法ではありません。 –