0

セットアップ:

サイドバーとメイン コンテンツ カラムがあります。サイドバーの幅は 33% で、メイン コンテンツの幅は残りのスペースを埋めるピクセル幅です。メイン コンテンツが特定のメディア クエリのブレークポイントに到達して小さくなるまで、固定幅のままにしたい。したがって、基本的には、ブレークポイントまでウィンドウのサイズが変更されると、サイドバーだけが縮小されるようにします。

これは私には簡単なはずですが、問題が発生しています。ウィンドウを縮小すると、サイドバーが十分に縮小されず、メイン コンテンツがその下に落ちてしまいます。これは、メイン コンテンツが縮小されていないため、その px 幅が画面の占める割合がどんどん高くなっていくのに対し、サイドバーは常に 33% しか占めていないためだと思います。

簡単な解決策があるような気がしますが、思いつきません。何か案は？

ありがとう、ギャルとみんな

4

2 に答える 2

2

概要

コンテンツ ボックスを 67% にして、div 間の空白をコメント アウトすると、機能するはずです。

またbox-sizing:border-box;、パディングを追加でき、合計幅に追加されないため、追加しました。

これはマージンには当てはまりません。マージンに正しく合わせるには、マージン + 幅 = 100% になるようにマージン パーセンテージを使用する必要があります。

背景色は、div の外観を示すためだけのものです。

以下に例を示します: http://jsfiddle.net/ZZwbF/

HTML:

<div id='container'>
<div class='sidebar'>
    Sidebar Test
</div><!--
--><div class='content'>
    Content Test
</div><!--
--></div>
​

CSS:

.sidebar
{
display:inline-block;
width:33%;
box-sizing:border-box;    
background-color:#09f;
}

.content
{
display:inline-block;
width:67%;
box-sizing:border-box;    
background-color:#0F9;
}
于 2012-07-23T14:23:57.797 に答える
1

私はそれを考え出した。

画面全体を埋めようとするのをやめなければなりませんでした。人々が私よりも大きな画面を持っていることを考えると、それは無意味です. そのため、残りのスペースを埋めるためにコンテンツに右マージンを設定する代わりに (これについては言及しませんでした)、左にフロートさせました。次に、サイドバーに最大幅を配置し、サイズ変更がコンテンツ ボックスに追いついたときのメディア クエリを作成します。

于 2012-07-23T20:18:23.020 に答える