固定要素が最大幅を受け入れないのはなぜですか？

Question

まず、問題が私のblogにあるので、ここにコードを投稿することはできません。 これを開いてください。さて、実際には2つの問題があります。

主な問題は：あなたが実際に私のブログのタイトルを含むヘッダでトップ、上のコンテンツに気が付いた場合

、は位置を固定しています。私のナビゲーションパネル（divはクラスタブ - 外側のdivです）の下に同じdivがあります。これらの両方の要素は、最大幅があります。？1090px、それが「機能していないS、これらの要素が固定されているように、どのような方法がありますし、また、最大幅を受け入れる

問題2：

2つ目はあなたのブラウザの画面幅を小さくすると、メインコンテンツ（divはクラスの内容 - 外側は）のdivが契約しているので、最大幅のプロパティを設定しています。このブログはどんなでもスマートフォン、それはそれに従っていない。ブログは1090pxの幅で開きますなぜそれが起こっていますか？何かが欠けていますか？

Answer 1

私はあなたのページを閲覧すると、私が上でこれを参照してください。home.html：162

html body .region-inner { 
     min-width: 0; 
     max-width: 100%; 
     width: auto; 
    } 

あなたはこれを削除した場合、あなたのナビゲーションパネルの幅は結構です。

Answer 2

主な問題：コードが予期しない動作をしているようです。おそらく、あなたはmax-widthの使用を誤解しているでしょう。あなたは結果を正確に何にしたいですか？あなたは以下の効果たい場合：

を次に、単に変更：

headerのmax-width: 1090pxwidth:100%;max-width:1090pxへ

と

.tabs-outerのmax-width: 1090pxwidth:100%;max-width:1090px;へ

を問題2：

あなたがモバイルデバイスで使用している効果が得られない場合は、CSS Media Queriesを使用して、画面サイズに基づいてCSSを指定します。次に例を示します。

@media (max-width: 767px){ 

.tabs .widget li, .tabs .widget li{ 
    width: 100%; 
    height: 34px; 
    text-align: center; 
    border: 1px solid #fff; 
    border-left: none; 
    border-right: none; 
    background-color: #19697b; 
} 

.tabs .widget li, .tabs .widget li:selected{ 
    background-color: #19697b; 
} 

.tabs .widget li, .tabs .widget li a{ 
    z-index: 0; 
    width: 100%; 
} 

} 

（この例では、より良い小さな画面のためのスペースを利用する一歩となり、ここでの結果は次のとおりです。