ウェブサイトの右側に600〜1024ピクセルの範囲内のデッドスペースが余分にあります

Question

私はこの現象について説明することができず、この問題を3日間にわたり調査しています。問題のウェブサイトはhereです。それは、プロのWebデザイナーによって行われていない - それは発達的/実験的な状態になっていますそれと他の欠点の膨れた状態を言い訳。

特定の画面サイズの範囲内で、私のウェブサイトは、その画面範囲内でコード化されているように画面サイズに適合するのではなく、xスクロールしてウェブサイトの右側にデッドスペースを表示します。

デッドスペースを確認するには、このsimulationとのスクロール権をチェックしてください。 600〜1024ピクセルの画面幅の範囲でスクロールする必要はありません。コンテンツが空き領域を埋めるようにしたいので、すべての上位divを最大幅100％に設定します。私が何を意味するかを示す

スクリーンショット：

あり3ブレークポイントはメディアクエリの3セットに基づいていると私は@media only screen and (min-width: 1024px)ルールがアクティブなときの挙動が観察されているアクティブな1であると仮定：

@media only screen and (min-width: 1024px){ 

div.sidebar { 
font-size: 10pt !important; 
width: 30% !important; 
display: table-cell !important; 
vertical-align: top; 
clear: right !important; 
float: left !important; 
} 


div#page{ 
margin: 0 auto !important; 
padding: 0 !important; 
max-width: 80vw !important; 
} 

main#content, .site-content{ 
width: 70% !important; 
float:left; 
} 

div#super-content{ 
width: 100% !important; 
} 

div#primary{max-width: 100% !important} 

} /* end media query */ 




/* up to 1024*/ 

@media only screen and (max-width: 1024px){ 

div.sidebar { 
font-size: 10pt !important; 
width: 30%; 
display: table-cell !important; 
vertical-align: top; 
clear: right !important; 
float: left; 
} 


div#page{ 
margin: 0 auto !important; 
padding: 0 !important; 
max-width: 100% !important; 
} 

div#primary{max-width: 100% !important} 

main#content, .site-content{ 
float: left; 
width: 70% !important; 
} 

div#super-content{ 
max-width: 100% !important; 
} 

} /* end media query */ 




/* up to 600 */ 
@media only screen and (max-width: 600px){ 

main#content{ 
width: 100% !important; 
} 

.sidebar{ 
float: left; 
vertical-align: initial !important; 
display: block !important; 
width: 100% !important; 
} 

#page{ 
max-width: 100% !important; 
} 


main#content{padding-right: 0;} 

} /* end media query */ 

私は本当に限り、ポスティングHTMLを開始するには知りませんが、私はwebsite linkを掲載しましたので、それを見るために、ブラウザの開発者モードに入るために些細である必要があり、O各コンテナに適用されるHTML構造とCSSルールのverall

Answer 1

これは、通常、不正な要素がコンテナからはみ出しているために発生します。

容器にoverflow:hiddenを適用することで、その要素がどこにあるのか把握することができます。容器が消えたら、その容器内にあることがわかります。

2番目の問題が、ページのheader要素にこれを適用しようとしました。

もう少し調査した後、実際にはサブナビによって発生しています。

ここに示されているように：

あなたがこの問題を解決したいのであれば、あなたがが、（そのメニューは他の方法をスティック）、代わりに左の右に整列するドロップダウンメニューを配置することができ右端のメニュー項目でのみこれを行うようにしてください。そうしないと、ナビの反対側でまったく同じ問題が発生します。

サードパーティ製のプラグインを使用してこのナビゲーションを作成しているようですので、これを自分で並べ替えることにしたくない場合は、代わりにbootstrap navigationを使用することをおすすめします。

希望は、運がよい。