0

CSSの流動的なレイアウトでは、すべてのdivがパーセンテージを使用します。ただし、サイドバーの位置を固定する必要があります。

例：

<aside style="width:25%; float:left; position:fixed;">
    aside content
</aside>
<div style="width:75%; float:left;">
    main content    
</div>

私が本当にやろうとしているのは、ビューポートに応じてサイドバーに特定の幅を維持させることです。たとえば、ビューポートの幅が1000〜1200ピクセルの場合は、幅を300ピクセルにする必要があります。

別の方法：親div（上記の例では親divについては言及していません）が1000pxより大きい場合は、幅を300pxにします。

それを行うにはJSが必要だと思いますが、JSに関しては私は完全に馬鹿なので、あなたの助けをいただければ幸いです。ありがとうございました。

4

3 に答える 3

0

試す：

@media only screen and (max-device-width: 1024px) { div#sidebar { width: 300px; }}
于 2012-12-20T14:41:45.580 に答える
0

CSS メディア クエリを試す

例

@media all and (min-width:1000px) and  (max-width:1200px)
{
  // css 
}

@media all and (min-width:300px) and (max-width:1000px)
{
   // css 
}
于 2012-12-20T14:55:51.333 に答える
0

の複製のように見えます: Bootstrap fluid layout - サイドバーの固定幅

そこでの私の答え：

私はあなたがこのようなものを見ていると思います:

<div class="sidebar span4">
    this is my fixed sidebar
</div>
<div class="main">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">this is fluid</div>
            <div class="span3 offset1">yeah!</div>
            <div class="span6">Awesome!</div>
        </div>
        <div class="row-fluid">
            <div class="span6">1 half</div>
            <div class="span6">2 half</div>
        </div>
    </div>
</div>

あなたの便宜のためにここにフィドルがあります：http://jsfiddle.net/TT8uV/2/

一般的な注意として：

ブートストラップを「メイン コンテナ」として使用する必要がないため、サイドバーをグリッド システム (ブートストラップ流体やレスポンシブなど) と並べて配置できます。このようにして、実際のコンテンツに影響を与えることなく、サイドバーを大幅に制御できます。

それがうまくいくことを願っています。

于 2013-03-06T01:42:58.243 に答える